Perfomance when wrap bottom bar with Stack.Navigator

[ducpt-bili]

The bottom tab is so lagging when i combine Curved Bottom Bar and Stack navigator. The layer is like this:

• Stack.Navigator:
  • Stack.Screen with component is Curved Bottom Bar
  • Stack.Screen is other screen.

Thank you.

[arun-saleth]

Yes i am also facing issue while using nesting navigation.when clicking tab icons so much delay to navigate

[hoaphantn7604]

hi @ducpt-bili , @arun-saleth , What steps can I follow to replicate the issue you are experiencing? Have you tried using React.memo and then wrapping the BottomBar?

[arun-saleth]

I will share my code here

<CurvedBottomBar.Navigator style={styles.bottomBar} screenOptions={{ headerShown: false }} strokeColor="#DDDDDD" circleWidth={60} strokeWidth={1} bgColor="white" shadowStyle={styles.shawdow} initialRouteName="Home" // width={isTablet ? width / 2.3 : width} borderTopLeftRight renderCircle={({ selectedTab, navigate }) => ( <Animated.View style={styles.btnCircle}> <TouchableOpacity style={{ alignItems: "center", flex: 1, justifyContent: "center", }} onPress={pressfunc} > <GlobalAdd /> </TouchableOpacity> </Animated.View> )} tabBar={RenderTabBar} > <CurvedBottomBar.Screen name="Home" position="LEFT" component={Dashboardscreen} /> <CurvedBottomBar.Screen name="Job" component={isTablet && width > 700 ? JobstabletScreen : Jobscreen} position="LEFT" /> <CurvedBottomBar.Screen name="Calendar" component={CalendarScreen} position="RIGHT" /> <CurvedBottomBar.Screen name="Task" component={isTablet && width > 700 ? TasktabletScreen : Taskscreen} position="RIGHT" /> </CurvedBottomBar.Navigator>

const RenderTabBar = ({ routeName, selectedTab, navigate }) => { return ( <TouchableOpacity onPress={() => navigate(routeName)} style={{ height: 50, alignItems: "center", }} > {_renderIcon(routeName, selectedTab)} </TouchableOpacity> ); };

const _renderIcon = (routeName, selectedTab) => { let icon = ""; switch (routeName) { case "Home": icon = routeName === selectedTab ? <HomeActive /> : <HomeInactive /> break; case "Job": icon = routeName === selectedTab ? <JobActive /> : <JobInactive /> break; case "Calendar": icon = routeName === selectedTab ? <CalendarActive /> : <CalendarInactive /> break; case "Task": icon = routeName === selectedTab ? <TaskActive /> : <TaskInactive /> break; }

return (
    <View style={styles.btmname}>
        <View>{icon}</View>
        <Text style={{ color: routeName === selectedTab ? Color.skyblue : "grey" }}>
            {routeName}
        </Text>
    </View>
);

};

My nesting navigation structure:

 ------------------ Inside Drawernavigation I am using tab navigation -----------------------------------------   
    
        
         <Drawer.Navigator screenOptions={{ headerShown: false }} initialRouteName='HomeDrawer' drawerContent={(props) => <CustomDrawerContent
        {...props} />}>
        <Drawer.Screen name="HomeDrawer" component={TabNavigation} options={{ title: 'Home' }} />
    </Drawer.Navigator>
        
        
        
        

[arun-saleth]

@hoaphantn7604 when I expect this? .too much lagging

[arun-saleth]

@hoaphantn7604 I tried memo.Its woking perfectly.Thank you for your Suggestions

[jelyqs]

Hi @arun-saleth

Can you share with me where to handle useMemo?

[Sulaiman122]

@hoaphantn7604 @arun-saleth it's slow for me, I don't know why, tried useMemo didn't change maybe i wrote it wrong, could you explain how to use useMemo or if there is another solution to this issue please help

[anhnguyen123]

CHÀO@ducpt-bili,@arun-saleth, Tôi có thể làm theo những bước nào để tái hiện vấn đề bạn đang gặp phải? Bạn đã thử sử dụng React.memo và sau đó gói BottomBar chưa?

Do you mean wrap usememo to cover the entire bottom bar?