How to force APP in light mode

Please provide the following:

  1. SDK Version:“36.0.0”
  2. Platforms(Android/iOS/web/all):all

Here is my app.json setting:

{
  "expo": {
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "userInterfaceStyle": "light",
    "ios": {
      "userInterfaceStyle": "light"
    },
    "android": {
      "userInterfaceStyle": "dark"
    }
...

Here is my App.js setting:

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { AppearanceProvider } from 'react-native-appearance';
...
const AppContainer = createAppContainer(SwitchNavigator);

export default class App extends React.Component {
  render() {
    return <AppearanceProvider><AppContainer></AppContainer></AppearanceProvider>
  }
}

I want to let my app always in light mode.
Follow this official doc:https://docs.expo.io/versions/latest/sdk/appearance/
But my setting “userInterfaceStyle”: “light” in global is not work

In expo client and standalone app all not work.
Have any idea?

I solved this issue.
The userInterfaceStyle just a parameter.
If origin your phone mode is dark, it will force to light.
But it only work on root page.
Some component like modal, it not work.
You should custom setting it

For modals, we solved this by adding in app.json:

"ios": {
      ...
      "infoPlist": {
        "UIUserInterfaceStyle": "Light"
      }
    },

What’s happening is that the Expo userInterfaceStyle prop is forcing the base UIView to light mode at run time. But modals are completely outside of that UIView, so they don’t get the setting. UIUserInterfaceStyle plist setting is the only setting that can change your entire app at compile time to light mode. Note that this only takes effect when building your app as standalone- the infopList settings have no effect in the Expo client.

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.