Expo Router

Expo Router is a popular routing library from Expo that is built on top of React Navigation. When using Unistyles with Expo Router, it’s necessary to configure it properly.

Modify main entry

Expo Router resolves routes differently that expected. Also, Unistyles 3.0 is parsing your StyleSheets as soon as you import file containing it. This combination may cause some issues. To prevent that you need to modify your main entry file:

package.json

{
   "main": "expo-router/entry"
   "main": "index.ts"
}

Then, create index.ts file with following content:

index.ts

import 'expo-router/entry'
import './unistyles' // <-- file that initializes Unistyles

Note

The unistyles.ts file is where Unistyles is configured. For more details, refer to the configuration guide.

With this setup, we will ensure that Unistyles is initialized before any other component.

Expo Router Web - Static rendering

Caution

This is the default option in Expo SDK 52.

You can check if you are using static rendering in app.json:

app.json

{
  "expo": {
    "web": {
      "bundler": "metro",
      "output": "static"
    }
  }
}

For Expo static rendering, every page will be resolved with the Root HTML file. Unfortunately, this file is hidden, and you need to create it manually. Please follow the Expo guide and add a +html.tsx file.

In this file, initialize Unistyles by importing the config file:

+html.tsx

import React from 'react'
import { ScrollViewStyleReset } from 'expo-router/html'
import { type PropsWithChildren } from 'react'
 import '../unistyles' // <-- file that initializes Unistyles

export default function Root({ children }: PropsWithChildren) {
    ...
}

This ensures that Unistyles is initialized whenever Expo Router renders the next static page.