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>
    );
  }
}

Solution 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

Solution 2

React Navigation 5x

If you updated to React Navigation version 5x, here's an update.

Code sample

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    cardStyle: { backgroundColor: 'transparent' },
    cardOverlayEnabled: true,
    cardStyleInterpolator: ({ current: { progress } }) => ({
      cardStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 0.5, 0.9, 1],
          outputRange: [0, 0.25, 0.7, 1],
        }),
      },
      overlayStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.5],
          extrapolate: 'clamp',
        }),
      },
    }),
  }}
  mode="modal"
>
  <Stack.Screen name="Home" component={HomeStack} />
  <Stack.Screen name="Modal" component={ModalScreen} />
</Stack.Navigator>

The properties cardOverlayEnabled and headerShown here are optionals. It's gonna depend on what you're trying to achieve.

Solution 3

React Navigation 6x

Set the screenOptions.presentation to "transparentModal".

Solution 4

Add lines transparentCard: true and cardStyle: {opacity: 1} in createStackNavigator

const MainStack = createStackNavigator({
  Tabs: TabNavigator,
  Modal: ModalScreen, 
},{
  headerMode: 'none',
  mode: 'modal',
  transparentCard: true,
  cardStyle: { opacity: 1 }
});

View more solutions

Comments

[Cristian Mora]

You can find a complete example below: snack.expo.io/@cristiankmb/…

[ThomasW]

Recently switched to this, although I can't find any way to make the background semi-transparent (essentially blurring and darkening the underlying screen). cardOverlayEnabled does not work for me, do you have any idea/pointers for that?

[Shaun Saker]

@ThomasW I used react-native-modal but have you tried setting the backgroundColor of your scene/page container View to "transparent"?