React Native UStyle

A seamless drop-in replacement for React Native that supercharges your development experience.

What is react-native-ustyle?

- import { View, Text } from 'react-native';
+ import { View, Text } from 'react-native-ustyle';

// App.tsx
import { Text, View } from 'react-native-ustyle';
 
export default function App() {
  return (
    <View bg="$primary" p={20} mx={20}>
      <Text c="$colors$blue500">Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

Custom Utility Props Support

Adds configurable utility props for styling

Token Based Theming

Define a set of tokens to be used in your styles

Fully Typed for Type Safety

Get the benefits of TypeScript's static type checking

Zero Runtime Overhead

Your app remains as fast and responsive as ever.

Zero Bundle Overhead

Everything is dev-dependency so nothing gets added to your bundle.

Seamless Integration

Minimal changes to your codebase to get started

Introducing Virtual Components

What is a virtual component you might wonder?

With react-native-ustyle you can create a virtual component that doesn't really exist but renders your styles using the react-native component you specified in the config. It's something like a styled component but without the need to create a new component.

// App.tsx
import { VC } from 'react-native-ustyle';
const { Heading } = VC;
export default function App() {
  return (
    <VC.Center p={20} mx={20}>
      <Heading size="md">This is a Heading</Heading>
    </VC.Center>
  );
}

This is how to create a virtual component in the config file

// rnu.config.ts
import { createConfig } from 'react-native-ustyle';
export const CONFIG = createConfig({
  aliases: {
    p: 'padding',
    // ... more aliases 
    roundedRight: ['borderTopRightRadius', 'borderBottomRightRadius'],
  },
  tokens: {
    global: {
      primary: '#0000FF',
      secondary: '#FFFF00',
    },
    space: {
      'px': 1,  
      // ... more space tokens
    },
    // ... more tokens
  },
  components: {
    Center: {
      tag: 'View',
      baseStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    Heading:{
      tag:"Text",
      baseStyle:{
        fontSize:20,
        fontWeight:"bold",
      },
      variants:{
        size:{
          sm:{
            fontSize:16,
          },
          md:{
            fontSize:20,
          },
          lg:{
            fontSize:24,
          }
        }
      }
    },
  },
} as const);
 
type ConfigType = typeof CONFIG;
 
declare module 'react-native-ustyle' {
  interface ICustomConfig extends ConfigType {}
}

Want to Know more?