Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?*

like image 517
Uuczek Avatar asked Dec 11 '22 01:12

Uuczek


1 Answers

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>
  );
};
like image 106
satya164 Avatar answered Dec 28 '22 08:12

satya164