Skip to content
Unistyles

Unistyles Provider

Unistyles Provider
All platforms
2.20.0

If you app has dozens of screens and hundereds of useStyles hooks, you can encounter some performance issues and delays eg. when changing the theme.

To solve this problem, Unistyles 2.20.0 introduces a new component called UnistylesProvider.

Usage

In order to use UnistylesProvider, you just need to wrap your app with it:

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


export const App: React.FunctionComponent = () => (
    <UnistylesProvider>
        <YourApp />
    </UnistylesProvider>
)

This line of code will cancel all subscriptions from your useStyles hooks and switch the source of truth to the UnistylesProvider.

How fast is it?

Re-rendering 1000 boxes with 1000 useStyles hooks (dev mode):

VersionTime
with Provider~700 ms
without Provider~4.5 seconds!

It can speed your app up to x6-7 times!