Skip to content

useStyles

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)

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={() => {}}
/>
)
}