expo: Root userInterfaceStyle does not apply on Android in Expo Go

Summary

{
  "expo": {
    "userInterfaceStyle": "automatic",
  }
}

this will not change the user interface style behavior to allow for both light and dark themes, instead you need to set it on the Android key

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "android": {
      "userInterfaceStyle": "automatic"
    }
  }
}

The root key does work as expected on iOS

Managed or bare workflow? If you have `ios/` or `android/` directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

Environment

  Expo CLI 4.7.2 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - ~/.nvm/versions/node/v14.15.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
      Android SDK:
        API Levels: 26, 28, 29, 30
        Build Tools: 26.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
        System Images: android-26 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
        Android NDK: 21.0.6113669
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.7042882
      Xcode: 12.5/12E262 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~42.0.0 => 42.0.0
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
      react-native-web: ~0.13.12 => 0.13.18
    npmGlobalPackages:
      expo-cli: 4.7.2
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

https://github.com/brentvatne/schemes

Run the project on Android and toggle between light/dark themes, notice the text doesn’t update. Now add "userInterfaceStyle": "automatic" under the "android" key and reload the app (not just fast refresh, full reload) and notice it works as expected.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 23 (6 by maintainers)

Commits related to this issue

Add `userInterfaceStyle` in android either Root `userInterfaceStyle` does not apply on android in expo go. Related https://github.com/expo/expo/issues/13488 — committed to dooboolab-community/dooboo-expo by hyochan 3 years ago
Workaround for https://github.com/expo/expo/issues/13488 — committed to tim-seidel/SmartFarmCheck by tim-seidel 3 years ago
Reverted workaround for expo/expo#13488 because it's fixed now. — committed to tim-seidel/SmartFarmCheck by tim-seidel 3 years ago

Most upvoted comments

The settings in app.json don’t seem to work yet. useColorScheme always returns light in Release mode, and installed apk. It works normally in Expo go.

App.json: { "expo": { ... "userInterfaceStyle": "automatic", "ios": { "userInterfaceStyle": "automatic" }, "android": { "userInterfaceStyle": "automatic" } } }

GuilhermeSilva00 on Aug 25, 2023

this fix will land in sdk 43

brentvatne on Aug 14, 2021

Always returns light on iPhone simulator and always returns dark on actual iPhone device.

"dependencies": {
  "@expo/metro-config": "^0.1.84",
  "@expo/vector-icons": "^12.0.0",
  "@react-navigation/drawer": "^6.1.4",
  "@react-navigation/native": "^6.0.2",
  "@react-navigation/native-stack": "^6.1.0",
  "babel-preset-expo": "8.3.0",
  "expo": "~42.0.1",
  "expo-constants": "~11.0.1",
  "expo-font": "~9.2.1",
  "expo-image-picker": "~10.2.2",
  "expo-location": "~12.1.2",
  "expo-splash-screen": "~0.11.2",
  "expo-status-bar": "~1.0.4",
  "expo-updates": "~0.8.2",
  "react": "16.13.1",
  "react-dom": "16.13.1",
  "react-native": "0.63.4",
  "react-native-codegen": "^0.0.7",
  "react-native-elements": "^3.4.2",
  "react-native-gesture-handler": "~1.10.2",
  "react-native-reanimated": "~2.2.0",
  "react-native-safe-area-context": "3.2.0",
  "react-native-safe-area-view": "^1.1.1",
  "react-native-screens": "~3.4.0",
  "react-native-unimodules": "~0.14.5",
  "react-native-web": "~0.13.12"
}

app.json

"expo": {
    "name": "Example",
    "slug": "example",
    "version": "1.0.0",
    "assetBundlePatterns": [
      "**/*"
    ],
    "userInterfaceStyle": "automatic",
    "ios": {
      "bundleIdentifier": "dev.expo.Example",
      "userInterfaceStyle": "automatic",
      "infoPlist": {
        "UIUserInterfaceStyle": "Automatic"
      }
    }
  }

umrashrf on Oct 7, 2021

@umrashrf - snack does not have an app.json

@callmeberzerker - did you follow the instructions from the original post in the thread?

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "android": {
      "userInterfaceStyle": "automatic"
    }
  }
}

brentvatne on Oct 7, 2021