useStyles

All platforms

2.0.0

Hook that ties everything together and handles the heavy lifting.

Without useStyles, you can’t utilize features like:

breakpoints
media queries
themes
variants

It can be imported from the react-native-unistyles:

import { useStyles } from 'react-native-unistyles'

useStyles accepts two optional arguments: stylesheet and variants.

To learn more about variants follow this guide.

Basic usage (no arguments)

If you need to access your theme or the current breakpoint in your component you can call useStyles without any arguments.

const { theme, breakpoint } = useStyles()

Basic usage (stylesheet)

For more advanced usage, pass your stylesheet generated with createStyleSheet:

// you can still access theme and current breakpoint
const { styles, theme, breakpoint } = useStyles(stylesheet)

The styles returned are compatible with any React Native component and satisfy the TypeScript type requirements.

Basic usage (breakpoint)

If you haven’t registered your breakpoints with UnistylesRegistry it will be always undefined. Otherwise it’s will be defined string like sm, md or xl.

With breakpoint you can manipulate the JSX to hide or show some components:

export const Example = () => {
  const { styles, breakpoint } = useStyles(stylesheet)

  return (
    <View style={styles.container}>
        <Hidden
            from="xs"
            to="md"
            breakpoint={breakpoint}
        >
          <MobileSidebar />
        </Hidden>
        <Visible
          from="md"
          breakpoint={breakpoint}
        >
          <WebSidebar />
        </Hidden>
    </View>
  )
}

Basic usage (theme)

Sometimes, you may need to access your theme values outside of the stylesheet. An example of this could be when working with a built-in React Native Button component.

import React from 'react'
import { Button } from 'react-native'
import { useStyles } from 'react-native-unistyles'

export const Example = () => {
  const { theme } = useStyles()

  return (
    <Button
        color={theme.colors.accent}
        title="Click me"
        onPress={() => {}}
    />
  )
}