FAQ

Here, you can find answers to the most frequently asked questions about Unistyles.

Why Unistyles runtime is not available?

This error occurs when you try to use a Unistyles features without proper installation.

Possible causes include:

Running the app in Expo Go, which is not supported.
Running your Expo project without rebuilding it using the expo prebuild command
Forgetting to execute pod install in your bare React Native project
Omitting the import of the file where you set up your UnistylesRegistry eg. in your App.tsx file
If you don’t use breakpoints and themes, you still need to somehow initialize the Unistyles code. To do that, add an empty import from react-native-unistyles in your App.tsx file:

import 'react-native-unistyles'

I’m trying to override library types, but I’m receiving error that react-native-unistyles is not found?

To override types, you must import something from react-native-unistyles, such as UnistylesRegistry.

Adaptive mode doesn’t work for me

To enable adaptive mode, you need to register two themes named light and dark and set the adaptiveThemes flag to true within UnistylesRegistry.

If your app still doesn’t automatically switch themes, ensure that:

For Expo your app.json contains a userInterfaceStyle key with the value automatic
For bare React Native, your Info.plist does not have the UIUserInterfaceStyle key set to a hardcoded value
Appearance from react-native is set to null
You have phone with iOS 13+ or Android 10+
Your device supports dark mode

My Android app is not edgeToEdge or insets are incorrect

Please check libraries used in your app that might interfere with the edge-to-edge layout. Before submitting an issue, verify insets reported by Unistyles with and without other libraries.

The most common issue is that some libraries disable edgeToEdge mode without notifying you. To confirm that your insets/layout are correct, simply move the app to the background and back to the foreground. Unistyles enables edgeToEdge every time the app comes to the foreground.

You can also look for following line in 3rd party libraries:

WindowCompat.setDecorFitsSystemWindows

Unistyles requires that second argument is always set to false!

Another common issue is that third-party libraries override top inset to make status bar translucent, and Android reports them as system insets. There is no way to distinguish between system insets and 3rd party insets, so you need to avoid some common mistakes listed below:

react-native-keyboard-controller

Library assumes that your app is not edge-to-edge and adds padding. To fix this, it requires both statusBarTranslucent and navigationBarTranslucent to be set to true docs.
react-native-screens and react-navigation

It’s not possible to detect if your app runs in edge-to-edge mode. If you enable statusBarTranslucent, react-native-screens sets always topInsets to 0. To prevent this, remove any occurrences of statusBarTranslucent from your navigators:
```
 <Stack
    screenOptions={{
        headerShown: false,
         statusBarTranslucent: true,
        contentStyle: styles.content
    }}
 >
    // your screens
</Stack>
```
react-native-avoid-softinput with setShouldMimicIOSBehavior as reported here
react-native-reanimated with useAnimatedKeyboard

You must set isStatusBarTranslucent to true in your useAnimatedKeyboard hook as keeping default value will interfere with Unistyles.
KeyboardAvoidingView from react-native:

If you use android:windowSoftInputMode="adjustResize" (default for expo projects) and try to avoid view on Android, make sure you set behavior="padding", otherwise your input will stay hidden behind the keyboard.

I’m getting some TypeScript error for my stylesheet

This should not occur, but if it does, please create a new issue in the GitHub repository.

Unistyles is built with first-class support for TypeScript, inferring all the types for you. There should be no need for extra steps. Please include your stylesheet and the error you’re encountering in the issue.

Does Unistyles support PlatformColor?

Yes, it does! You can even use PlatformColor in your themes!

Are class components supported?

No, the library only supports functional components. If you need support for class components, you would need to create a wrapper component.

How to use Unistyles with Expo?

Unistyles supports Expo. However, it can’t be used with Expo Go.

Why does my app restart on theme change or font size change (Android)?

This behavior is default in Android. To prevent this, you need to add the following line to your AndroidManifest.xml file:

<activity android:configChanges="uiMode|fontScale|keyboard|keyboardHidden|orientation|screenSize" />

Does Unistyles support JSC engine?

Unistyles supports the JSC engine, although it is not recommended. If you encounter any issues with array.prototype.at, please consider using a polyfill.

Does Unistyles support desktop platforms?

Yes, Unistyles supports both macOS with react-native-macos and Windows with react-native-windows packages.

My release app is crashing on startup (Android) with ProGuard enabled

It’s essential to keep the Unistyles code from being obfuscated. Unistyles is using JNI with reflection, and ProGuard can break it. To fix this, add the following line to your proguard-rules.pro file:

-keep class com.unistyles.** { *; }

Can I run Unistyles on my TV?

Yes, Unistyles supports both android and apple tv with react-native-tvos package.

What about visionOS?

Also yes! Unistyles supports visionOS with react-native-visionos package.