Re-thinking styling in build time with react-native-ustyle 😺

Since react-native's initial launch in 2015, there have been numerous styling libraries built to simplify the styling of components by creating new stylable or as we call them styled-components. But what if I could extend my React Native Components to add some styling features that I require? and that too without any bundle or runtime overhead?

What if I could write something like this?

import { View, Text } 'react-native';

export default function App(){
    return (
        <View marginTop={20} bg="#FAFAFA" p={16} >
            <Text c="#000000" fontSize={16}>Hello</Text>
        </View>
    );
}

instead of this:

import { View, Text, StyleSheet } 'react-native';

export default function App(){
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Hello</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container:{
        marginTop:20,
        backgroundColor:"#FAFAFA",
        padding:16
    },
    text:{
        color:"#000000",
        fontSize:16
    }
})

And what if I could define my custom shorthand aliases with some sort of config?

Wouldn't life would have been easier? Instead of component libraries, you'll be publishing configs. That would be a cool world to live in, won't it?

Take a pause and give it some thought...

Well, this is exactly what react-native-ustyle offers. It's a seamless drop-in replacement for react-native that supercharges your DX with fully typed support for shorthand styling.

So now instead of creating new styled components so that you can reap the gains from losing on some performance and bundle size, simply reap the gains with no loss.

Head to the 👉 react-native-ustyledocs to see what I'm talking about.

I'll quickly share all the features of RNU in a gist;

Zero Runtime

One of the key features of react-native-ustyle is its zero runtime overhead. Despite the added functionality, it doesn't affect the performance of your React Native applications. This is because the utility props are resolved at compile-time, ensuring that your app remains as fast and responsive as ever.

Zero Bundle Size

Since this only runs on build time, You don't add any bundle overhead with this package. Just install everything with the --dev flag and you are breezing to go.

Configurable aliased utility props

You get to decide what properties your component can take in and utilize as styles with a rnu.config.ts file. This also extends the typing of the React Native Components that you are going to use.

import { createConfig } from 'react-native-ustyle';
export const CONFIG = createConfig({
  p: 'padding',
  m: 'margin',
  t: 'top',
  b: 'bottom',
  l: 'left',
  r: 'right',
  h: 'height',
  w: 'width',
  bg: 'backgroundColor',
  c: 'color',
  mx: 'marginHorizontal',
  bc: 'borderColor',
  bw: 'borderWidth',
  mr: 'marginRight',
} as const);

type ConfigType = typeof CONFIG;

declare module 'react-native-ustyle' {
  interface ICustomConfig extends ConfigType {}
}

Full type safety

react-native-ustyle is fully typed, which means you get the benefits of TypeScript's static type checking. This not only helps catch errors early in the development process but also provides auto-completion, making it easier to write and navigate your code. Also, it provides you with the ability to use the utility props with the correct types.