Perfomance when wrap bottom bar with Stack.Navigator

[ducpt-bili]

Perfomance when wrap bottom bar with Stack.Navigator

[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

[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}
>


</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)}

);
};

const _renderIcon = (routeName, selectedTab) => {
let icon = "";
switch (routeName) {
case "Home":
icon = routeName === selectedTab ? :
break;
case "Job":
icon = routeName === selectedTab ? :
break;
case "Calendar":
icon = routeName === selectedTab ? :
break;
case "Task":
icon = routeName === selectedTab ? :
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?