Setup

1. Install package

yarn add react-native-unistyles@next

2. Finish installation

Dev client only

Unistyles includes custom native code, which means it does not support Expo Go.

To finish the setup use expo dev client and run prebuild command:

yarn expo prebuild --clean

Library supports autolinking, to finish the setup run pod install:

cd ios && pod install

Unistyles offers first-class support for React Native Web. To run the project, we recommend following the guidelines provided by Expo:

yarn expo add react-dom react-native-web @expo/webpack-config

Library supports also Server Side Rendering. We recomment to setup to project with Solito:

npx create-solito-app@latest my-solito-app

3. Configure Unistyles with `UnistylesRegistry`

Every step mentioned here is optional. If you don’t want to use theming, breakpoints, or any other setting, you don’t need to even call UnistylesRegistry. You can jump directly into working on your components.

Remember that UnistylesRegistry should be called only once. If you want to interact with Unistyles use UnistylesRuntime as described here.

3.1 Define your breakpoints

You can name your breakpoints however you like. The only restriction is that the first breakpoint must start with 0:

export const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  superLarge: 2000,
  tvLike: 4000
} as const

3.2 Define your theme(s)

You can define as many themes as you want. Each theme just needs to have a unique name and the same type. The library has no restrictions on the shape of the theme. You can use nested objects, functions, spread operators, and so on.

 export const lightTheme = {
   colors: {
     typography: '#000000',
     background: '#ffffff'
   },
   margins: {
     sm: 2,
     md: 4,
     lg: 8,
     xl: 12
   }
 } as const

 export const darkTheme = {
   colors: {
     typography: '#ffffff',
     background: '#000000'
   },
   margins: {
     sm: 2,
     md: 4,
     lg: 8,
     xl: 12
   }
 } as const

 // define other themes

3.3 Configure TypeScript

If you’re using TypeScript, create types for your breakpoints and/or themes. This step is required to achieve perfect Intellisense support across all StyleSheets.

// if you defined breakpoints
type AppBreakpoints = typeof breakpoints

// if you defined themes
type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

// override library types
declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

3.4 Call `UnistylesRegistry`

The final step is to call UnistylesRegistry to pass your themes, breakpoints and optional config.

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

UnistylesRegistry
  .addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
    // register other themes with unique names
  })
  .addConfig({
    // you can pass here optional config described below
    adaptiveThemes: true
  })

Don’t forget to import the unistyles.ts file somewhere in your code eg. in the App.tsx file.

Optional config

UnistylesRegistry has a method called addConfig that let’s you use some cool additional features. List of all available settings can be found here.

3.5 Full example

import { UnistylesRegistry } from 'react-native-unistyles'
import { breakpoints } from './breakpoints'
import { lightTheme, darkTheme } from './themes'

type AppBreakpoints = typeof breakpoints
type AppThemes = {
  light: typeof lightTheme,
  dark: typeof darkTheme
}

declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry
  .addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
  })
  .addConfig({
    adaptiveThemes: true
  })