Conditionally rendering stack navigators #10030
Replies: 1 comment 1 reply
-
Hi there, I'm not sure I'm qualified to answer if your approach is good/bad/doesn't matter... but I can share what my approach with a couple of examples that might be food for thought for you... My implementation was to nest navigators, so that they are all always in memory and the "Stack" of screens that is your route history will always be valid, I'm not sure how switching from say your IntroStackNavigator to the AuthStackNavigator handles route history...? My root route looks like this: const ModalStack = createStackNavigator(); <ModalStack.Navigator mode="modal" screenOptions={{ headerShown: false }} initialRouteName={RouteNames.Start}>
<ModalStack.Screen name={RouteNames.Start} component={Blank} />
<ModalStack.Screen name={RouteNames.RootStack} component={MainStack} />
<ModalStack.Screen name={RouteNames.auth} component={Auth} />
<ModalStack.Screen name={RouteNames.dev} component={DevMenu} />
<ModalStack.Screen name={RouteNames.webview} options={{ headerShown: false }} component={WebView} />
<ModalStack.Screen name={RouteNames.userSettings} component={UserSettings} />
<ModalStack.Screen name={RouteNames.chatbotStack} component={Chatbot} />
<ModalStack.Screen name={RouteNames.initialLoading} options={{ gestureEnabled: false }} component={InitialLoading} />
<ModalStack.Screen name={RouteNames.blurCover} options={{ cardStyle: { backgroundColor: 'transparent' } }} component={BlurCover} />
</ModalStack.Navigator> and each of the components is either a screen component that renders content directly, or is a nested Navigator that contains more screens.
Here is what my Dev Route above, looks like when you follow the "DevMenu" component to its file: export default (props: iProps) => {
const StackNav = createStackNavigator();
return (
<>
<StackNav.Navigator>
<StackNav.Screen name={Routes.devStoryBook} component={() => <></>} />
<StackNav.Screen name={Routes.devExperiments} component={Experiments} />
<StackNav.Screen name={Routes.devAsyncStorage} component={AsyncStorage} />
<StackNav.Screen name={Routes.devFCMManager} component={FCMManager} />
<StackNav.Screen name={Routes.devNavMaster} component={NavMaster} />
<StackNav.Screen name={Routes.devLogs} component={Logs} />
</StackNav.Navigator>
</>
);
}; |
Beta Was this translation helpful? Give feedback.
-
Hey guys
I was wondering if what we are doing is a good way of going about things. We are conditionally rendering navigators. Most of the documentation looks at conditionally rendering screens so I'm wondering if what we are doing is an anti pattern? Here's an example of what we are doing.
Beta Was this translation helpful? Give feedback.
All reactions