CODEWITHSUNDEEP
react-native
ArtemKh
ArtemKh

Reputation: 1000

React Native 0.62.2 Appearance return wrong color scheme

On iOS simulator (13.3) and Android 10

I have an issue with Appearance and useColorScheme when I set up dark mode it's still returned "light". 

import { useColorScheme, Appearance } from 'react-native';

const colorScheme = useColorScheme();
console.log(colorScheme, Appearance.getColorScheme()) // "light", "light"

Am I doing something wrong?

Upvotes: 7

Views: 8145

Answers (5)

Abdullah Sher Muhammad
Abdullah Sher Muhammad

Reputation: 1

Note: make sure your iOs or Android project is not hard-coded to a light user-interface style, or the above will not work. If using Expo, you will need to set "userInterfaceStyle": "automatic" in your app.json under the expo key (the default is “light”).

Upvotes: 0

Amir
Amir

Reputation: 449

In your app in ios folder => your-project-name => Info.plist add the unspecified value instead of Light or Dark.

        <dict>
            <key>UIUserInterfaceStyle</key>
            <string>unspecified</string>
        </dict>

Upvotes: 1

Emad Jumaah
Emad Jumaah

Reputation: 185

add

"userInterfaceStyle": "automatic",

to app.json

Upvotes: 18

Justin Dupre
Justin Dupre

Reputation: 141

Also make sure you do not have UIUserInterfaceStyle set in your Info.plist. I had it set to 'light' so Appearance.getColorScheme() was always returning 'light'.

Upvotes: 14

ArtemKh
ArtemKh

Reputation: 1000

I found the problem.

Problem related to this pull request https://github.com/facebook/react-native/commit/f7b90336be25b78935549aa140131d4d6d133f7b - when debugger is active you will always get "light" theme. Just close debugger and everything will be good.

Upvotes: 28

Related Questions