Basic Usage

Did you know?

The library was designed to keep your components clean. You don’t need to worry about importing custom components or creating styles based on an opinionated syntax.

After the initial setup, you only need to focus on two functions responsible for your styles:

• createStyleSheet which replaces StyleSheet.create

• useStyles which parses your styles and ensures TypeScript compatibility with media queries and breakpoints

  Simple example with theming

  import React from 'react'
  import { View, Text } from 'react-native'
  import { createStyleSheet, useStyles } from 'react-native-unistyles'
  
  export const ExampleUnistyles = () => {
      const { styles } = useStyles(stylesheet)
  
      return (
          <View style={styles.container}>
              <Text style={styles.text}>
                  Unistyles example
              </Text>
          </View>
      )
  }
  
  const stylesheet = createStyleSheet(theme => ({
      container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: theme.colors.background
      },
      text: {
         color: theme.colors.typography
      }
  }))