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)

42

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.

[brentvatne]

this fix will land in sdk 43

[umrashrf]

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"
      }
    }
  }