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?*
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>
);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With