Migrate from StyleSheet

Unistyles embraces the simplicity of StyleSheet, making it easy to integrate into your project.

You can replace StyleSheet.create with createStyleSheet and it will work exactly the same:

const styles = StyleSheet.create({
const styles = createStyleSheet({
    scrollContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

If you’re refactoring your components and require additional functionalities in any of them such as breakpoints, media queries, variants or theme you can incrementally pass style(sheet) into the useStyles hook:

ExampleUnistyles.tsx

export const ExampleUnistyles = () => {
  const { styles } = useStyles(stylesheet)
  // ... your component code
}

Tip

To follow the library’s naming convention you need to rename styles to stylesheet and pass it to the useStyles hook.

With the hook in place, you can now use all the features.