Appearance.getColorScheme() is only returning light

[oporter1]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

Appearance.getColorScheme() is only returning light mode even when I switch it between dark and light mode.

React Native version:

Run react-native info in your terminal and copy the results here.

Expo CLI 4.4.3 environment info: System: OS: macOS 11.4 Shell: 5.8 - /bin/zsh Binaries: Node: 15.3.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.0.14 - /usr/local/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: Android SDK: API Levels: 26, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom IDEs: Android Studio: 4.1 AI-201.8743.12.41.6953283 Xcode: /undefined - /usr/bin/xcodebuild npmPackages: expo: ^41.0.1 => 41.0.1 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 npmGlobalPackages: expo-cli: 4.0.4 Expo Workflow: managed

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1.switch simulator phone systems to "dark" mode 2. run some code that should pick up on the color scheme 3. print out that the color scheme is still picking up on light mode

Expected Results

Describe what you expected to happen.

appearance to recognize dark mode

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

import React, { useState, useEffect, useContext } from "react";
import {
  View,
  StyleSheet,
  ScrollView,
  Keyboard,
  Text,
  Alert,
  Appearance,
  TouchableOpacity,
} from "react-native";

....

const RegisterScreen = ({ navigation }) => {
  const colorScheme = Appearance.getColorScheme();
  const isDarkModePrefered = colorScheme === "dark";
  console.log("colorScheme", colorScheme);//this is always coming back as "light"  
  console.log("isDarkModePrefered", isDarkModePrefered);//this is always coming back as "false"

[cconner57]

This is a common bug in React Native. This bug occurs when you run your app in the debugger. If you turn the debugger off or add "userInterfaceStyle": "automatic", in the app.json file, it'll work as intended

[oporter1]

@cconner57 I do not have debugger on. Is it possible is it happening for another reason?

[oporter1]

Update - I turned on and off the debugger twice and input the "userInterfaceStyle": "automatic" and it started working. Not sure how or why but this is resolved for me. Thank you

[Ciberusps]

@oporter1 thanks a lot turned off "Debug" in developer menu and now theme switch when i change theme and restart app

[coffe0wl]

This is the condition of Appearance.getColorScheme() method.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.