Migration from version 1.x

Migration from 1.x

Unistyles 2.0 introduces several breaking changes, most of which are easy to resolve.

Additionally, remember that Unistyles utilizes native modules, so it’s necessary to run pod install after upgrading.

For more information, visit here.

1. Remove your `UnistylesTheme`

The library now facilitates C++ with HostObject eliminating the need for React Context. Additionally, a simpler API has been introduced to change themes at any time. Therefore, you can now unwrap your app from UnistylesTheme.

import React from 'react'
import { UnistylesTheme } from 'react-native-unistyles'
import { theme } from './theme'

export const App: React.FunctionComponent = () => (
  <UnistylesTheme theme={theme}>
    // Your App
  </UnistylesTheme>
)

2. Remove `createUnistyles`

With the power of TypeScript types, you no longer need to use createUnistyles. There is also a new way to register necessary configs. You can safely remove these lines of code.

import { createUnistyles } from 'react-native-unistyles'
import { breakpoints } from './breakpoints'
import { theme } from './theme'

export const {
   createStyleSheet,
   useStyles,
} = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)

3. Breakpoints

In version 2.0, breakpoints are optional. If your app wasn’t using them, you can delete your breakpoints object. For those who were using breakpoints, there are no breaking changes.

4. Theming

You can use the same themes. You just need to give them unique names, as explained in the later steps.

5. TypeScript types

In step 2, you removed createUnistyles. This factory was previously used to pass types to the core of the library. To register your types now, you need to override the library types with the following syntax:

import { breakpoints } from './breakpoints'
import { lightTheme, darkTheme, otherTheme } from './theme'

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

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

Use your unique theme names to create an AppThemes type. If you don’t use themes or breakpoints, you can skip this step. It’s only required if you want to achieve perfect IntelliSense integration across your app.

6. Register your themes and breakpoint with `UnistylesRegistry`

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

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

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

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

If you want to learn more about UnistylesRegistry follow this guide.

7. Change your imports

This is the most tedious part, but it guarantees perfect TypeScript types throughout your app. You can now import createStyleSheet and useStyles directly from the library.

import { useStyles, createStyleSheet } from 'lib/styles'
import { useStyles, createStyleSheet } from 'react-native-unistyles'

8. `createStyleSheet` and `useStyles`

Both have been improved with additional features and without introducing any breaking changes!

9. Media queries

Media queries in version 1.x were far from perfect. Users had to follow a string-based template to make them work. In version 2.0, old media queries are deprecated and should be updated to the following syntax:

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

// your component code

const stylesheet = createStyleSheet(theme => ({
    container: {
        width: {
           ':w[200, 500]:h[100]': 0,
           ':w[, 200]': 100
           [mq.width(200, 500).and.height(100)]: 0,
           [mq.only.width(null, 200)]: 100
        }
    }
}))

To learn more about mq utility refer to this guide.