Search code examples
iosreact-nativetransparencyreact-navigationstack-navigator

React Native: Transparent Stack Navigator in iOS doesn't work

I use a Stack Navigator from React Navigation and want to make it transparent with the following code:

const MyStackNavigator = new StackNavigator({
  ScreenOne: { screen: ScreenOne },
},{
  cardStyle: {
    backgroundColor: "transparent",
  }
});

(see also: https://snack.expo.io/@pob/stacknavigator-problem)

The result in Android is fine, while the result in iOS is a black Stack Navigator:

Screenshot of the Android App The Android App

Screenshot of the iOS App The iOS App

I suspect, that the background of the Stack Navigator's card is also transparent iOS, but that there's another black View behind the iOS Stack Navigator.

Solution

  • There is a workaround for this. Please try this link for a demo https://snack.expo.io/ryLBDw-1Q

    What changed is that i am setting a config for this on the stack

    transitionConfig: () => ({
  containerStyle: {
    backgroundColor: 'transparent',
  },
})

    This issue also mentioned here -> https://github.com/react-navigation/react-navigation/issues/2713