How to give a transparent background to a fullScreen modal in react navigation (3.x)?

Question

How to give a transparent background to a fullScreen modal in react navigation (3.x).The solution given here is not working in new version of react-navigation. I want a transparent color in a new fullscreen modal which is presented over another screen.

  const MainNavigator = createStackNavigator(
  {
    BrowserHome: { screen: BrowserHome },
    ImageDetailModal: {
      screen: ImageDetail,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    mode: "modal",
    cardStyle: {
      backgroundColor: "transparent",
      opacity: 1
    }
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

While my Image detail component which is presented over 'BrowserHome' component is:

export default class ImageDetail extends React.Component {
  render() {
    const modalColor = this.props.navigation.getParam("modalColor");
    return (
      <View
        style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
      >
        <View
          style={{
            height: "50%",
            width: "100%",
            backgroundColor: "red",
            justifyContent: "center"
          }}
        >
          <Text>Testing a modal with transparent background</Text>
        </View>
      </View>
    );
  }
}

Answer 1

You can now remove the cardStyle object and set instead transparentCard: true :

const MainNavigator = createStackNavigator(
  {
    BrowserHome: { screen: BrowserHome },
    ImageDetailModal: {
      screen: ImageDetail,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    mode: "modal",
    transparentCard: true
  })

https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig