React Native: Transparent Stack Navigator in iOS d

Question

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:

The Android 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.

Answer 1

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