You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently going through an effort to de-nest our navigator structure due to performance issues. Our previous setup had stack navigators > tab navigator > drawer navigator, but with the updated version we now just have a tab navigator inside a drawer from react-native-drawer-layout. The issue is that we have a lot of modal screens, and they're shown via a stack navigator as per the docs. They're all meant to present modally, and cover the entire screen.
With the new setup we'd like to avoid creating that additional navigator recommended by the docs just for the sake of the modal screens, here is a rough idea of where I'm at at the moment, but I'm not sure if it's the best approach and it's not working quite right on Android:
constRootStack=createNativeStackNavigator<RootStackParamList>();// where should these go?constModalScreens=[<RootStack.Screenkey="ModalLogin"name="ModalLogin"component={Login}/>,<RootStack.Screenkey="ModalSignUp"name="ModalSignUp"component={SignUp}/>,// and about 20 more screens]constMainStack=createNativeStackNavigator<RootStackParamList>();constHomeStackNavigator=()=>(<MainStack.NavigatorinitialRouteName="HomeScreen"><MainStack.Screenname="HomeScreen"component={HomeScreen}/>
{SharedScreens}// in each navigator like this? Works fine on iOS but doesn't work on Android.<MainStack.GroupscreenOptions={{presentation: 'modal'}}>{ModalScreens()}</MainStack.Group></MainStack.Navigator>)constProfileStackNavigator=()=>(<MainStack.NavigatorinitialRouteName="ProfileScreen"><MainStack.Screenname="ProfileScreen"component={ProfileScreen}/>
{SharedScreens}</MainStack.Navigator>
)constSettingsStackNavigator=()=>(<MainStack.NavigatorinitialRouteName="SettingsScreen"><MainStack.Screenname="SettingsScreen"component={SettingsScreen}/>
{SharedScreens}</MainStack.Navigator>
)constTabNavigator=()=>(<Tab.Navigator><Tab.Screenname="Home"component={HomeStackNavigator}/><Tab.Screenname="Profile"component={ProfileStackNavigator}/>
<Tab.Screenname="Settings"component={SettingsStackNavigator}/></Tab.Navigator>
)constDrawer=()=>{constdispatch=useDispatch();constisDrawerOpen=useSelector((state)=>state.isDrawerOpen);return(<DrawerLayoutdrawerPosition="right"drawerType="front"open={isDrawerOpen}onOpen={()=>dispatch(setDrawerOpened(true))}onClose={()=>dispatch(setDrawerOpened(false))}renderDrawerContent={renderDrawerContent}drawerStyle={{width: '100%'}}><TabNavigator/></DrawerLayout>);};exportconstAppNavigator=memo(functionAppNavigator(){return(<><Drawer/></>);});
This is a modified version to reduce how much is in the issue and keep it a bit more private, but hopefully shows the setup well.
I'm not sure where the best place to put them is now. In that code snippet I have placed them in one of the stack navigators, would doing that for each be the best spot? And if so is there performance or other potential issues in having that in each stack? This approach seems to work fine on iOS but not on Android, which is a limitation of the underlying react-native-screens as per this issue. Any advice would be appreciated, as mentioned nesting navigators has a noticeable performance impact in our app on Android devices, so we'd really like to avoid it.
Thanks a lot for any help and the awesome package!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Currently going through an effort to de-nest our navigator structure due to performance issues. Our previous setup had stack navigators > tab navigator > drawer navigator, but with the updated version we now just have a tab navigator inside a drawer from
react-native-drawer-layout
. The issue is that we have a lot of modal screens, and they're shown via a stack navigator as per the docs. They're all meant to present modally, and cover the entire screen.With the new setup we'd like to avoid creating that additional navigator recommended by the docs just for the sake of the modal screens, here is a rough idea of where I'm at at the moment, but I'm not sure if it's the best approach and it's not working quite right on Android:
This is a modified version to reduce how much is in the issue and keep it a bit more private, but hopefully shows the setup well.
I'm not sure where the best place to put them is now. In that code snippet I have placed them in one of the stack navigators, would doing that for each be the best spot? And if so is there performance or other potential issues in having that in each stack? This approach seems to work fine on iOS but not on Android, which is a limitation of the underlying
react-native-screens
as per this issue. Any advice would be appreciated, as mentioned nesting navigators has a noticeable performance impact in our app on Android devices, so we'd really like to avoid it.Thanks a lot for any help and the awesome package!
Beta Was this translation helpful? Give feedback.
All reactions