[native-stack] iOS 13 Style Modal Has White Background instead of Black

Moved from react-navigation/react-navigation#6791. Originally opened by @hammadj

---

Current Behavior

• What code are you running and what is happening? Using a NativeStackNavigator and presenting a screen with stackPresentation: 'modal' results in the app having a white BG.

Expected Behavior

• What do you expect should be happening? The status bar text should turn white and the background should be black:

How to reproduce

Using Expo SDK 36, with backgroundColor in app.json set to #000000 it still doesn’t work.

Here’s the code snippet:

const Stack = createNativeStackNavigator<NavScreenParams>();

export const HomeNavigator: React.FC = () => (
  <Stack.Navigator initialRouteName={Screen.HOME}>
    <Stack.Screen
      name={Screen.HOME}
      component={Home}
      options={{ title: 'Home', headerShown: false }}
    />
    <Stack.Screen
      name={Screen.PROFILE}
      component={ProfileNavigator}
      options={{ stackPresentation: 'modal' }}
    />
  </Stack.Navigator>
);

Your Environment

software	version
iOS or Android	iOS
@react-navigation/native	5.0.0
@react-navigation/native-stack	5.0.0
react-native-screens	2.0.0-beta.2
react-native	https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
expo	36.0.2
node	10.16.0
npm or yarn	1.16.0

[sbkl]

Setting up at navigator level with cardOverlayEnabled set to true is getting the right background colour with expo sdk37:

<Stack.Navigator
    headerMode="none"
    mode="modal"
    screenOptions={{
        gestureEnabled: true,
        cardOverlayEnabled: true,
        ...TransitionPresets.ModalPresentationIOS,
    }}
>
    //Stack.Screens goes here
</Stack.Navigator>

[kmagiera]

I’m currently working on exposing a way to customize status bar from stack header options. This is not ready yet and I’ll update here on the status.

In the meantime wanted to share some solutions you may try right now:

1. The background color that you see under the new iOS 13 modal is the application window background. Apparently expo sets that to be white. If your app is ejected from expo (or use bare workflow) you should be able to change that in appdelegate by doing self.window.backgroundColor = [UIColor blackColor]; after the window is initialized. Note this will change the background for the whole app and won’t allow you to update that background at will (unless you write a native module to update it)

2. The status bar color below the modal should be handled automatically by the system. However that behavior is likely disabled if you use standard react-native or expo project. To enable automatic handling of status bar color you’ll need to update Info.plist setting UIViewControllerBasedStatusBarAppearance to YES. The reason why it is set to NO is for the RN’s StatusBar module to work. The status bar module allows for overriding status bar style but it requires that option to be disabled. If you change it to YES you will no longer be able style the status bar using StatusBar module from react native. Flipping it to YES however will give you the exact effect as in the first post here where the status bar color animates as the modal opens.