'React-Navigation v5 - transparency between stack navigators

Hey I have a problem with transparency when using more than one Stack.Navigator.

I create 2 Stack.Navigators -> one for Screens, and one for Popups. The issue is, that my Popups has transparent backgrounds, and in this case, i need to show Screens in the background. It was working in react.navigation v4, and now in v5 I can't find any solution how to solve this issue.

SNACK https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency

navigation structure img

*There is two Stack.Navigators, because Stack.Navigator for Popups has different and much more complicated screenOptions. Also, in Docs about nesting navigators there is an advice to put one Stack.Navigator inside another. In this case the issue is, that when you set parent Stack.Navigator headerMode="screen", and children Stack.Navigator headerMode="none", the childrens headerMode is inherited from parent. The same problem is with other properties - that's why the structure of my navigation is as it is.

Idk that i'm doing something wrong, or thats the issue of new version of react-navigation and I should write to react-navigation team?*

Solution 1:^[1]

The problem is that you want to have your Screens stack in the background when you show your screens in the Modals stack. You have set transparent background for screens in the modal stack but your screen containing the Modals stack itself doesn't have a transparent background.

You need to make the screen containing Modals stack transparent as well:

<Stack.Screen
  name="Modals"
  component={Modals}
  options={{ cardStyle: { backgroundColor: "transparent" } }}
/>

the childrens headerMode is inherited from parent. The same problem is with other properties - that's why the structure of my navigation is as it is.

Navigators don't inherit configuration of their parent navigators. In case of you are talking about navigator configuration (props) and screens, navigator's configuration is not for screens (e.g. screens don't have headerMode).

You don't need so many navigators. A single navigator like this is fine:

const modalOptions = {
  headerShown: false,
  cardStyle: { backgroundColor: "transparent" },
  cardOverlayEnabled: true,
  cardStyleInterpolator: ({ current: { progress } }) => ({
    cardStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 0.5, 0.9, 1],
        outputRange: [0, 0.1, 0.3, 0.7]
      })
    },
    overlayStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 0.6],
        extrapolate: "clamp"
      })
    }
  })
};

const Navigation = () => {
  return (
    <Stack.Navigator headerMode="screen">
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen
        name="NewPopup"
        component={NewPopup}
        options={modalOptions}
      />
      <Stack.Screen name="Popup" component={Popup} options={modalOptions} />
    </Stack.Navigator>
  );
};

Solution 2:^[2]

You need to add props in stack screen tag as mention below

<Stack.Screen name="ScreenName" component={component} options={{ presentation: "transparentModal"}}></Stack.Screen>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Gurwinder Singh

'React-Navigation v5 - transparency between stack navigators

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]