Appearance.getColorScheme() is only returning light

oporter1 commented 3 years ago

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

run some code that should pick up on the color scheme
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 commented 3 years ago

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 commented 3 years ago

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

oporter1 commented 3 years ago

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