Re-Render tab content

[YousefAlsbaihi]

how can i add a listener to the tab so every time i press on a tab the function inside it gets refreshed

i wanna press on "title1" and have what's inside it Re-rendered .

is there a way to accomplish that ?

<CurvedBottomBar.Navigator
                ref={ref}
                type={type}
                height={80}
                circleWidth={65}
                bgColor={theme.colors.navBg}
                borderTopLeftRight={true}
                style={{ marginBottom: -35 }}
                initialRouteName="title1"
                renderCircle={({ selectedTab, navigate }) => (
                    <Animatable.View animation="pulse" iterationCount={100000} direction="normal">
                        <TouchableOpacity
                            style={[type === 'down' ? styles.btnCircle : styles.btnCircleUp, { backgroundColor: theme.colors.navBigButtonBg, }]}
                            onPress={() => {
                                if (type === 'up' && currentNav != 'center') {
                                    setType('down');
                                    setCurrentNav('center')
                                    navigate('center')
                                    setHeaderTitle("Start")
                                } else {
                                    setType('up');
                                    setCurrentNav('center')
                                    navigate('center')
                                    setHeaderTitle("Start")
                                }

                            }}
                        >
                            <Ionicons name={'flash'} color={theme.colors.navIconSelected} size={52} />
                        </TouchableOpacity>
                    </Animatable.View>
                )}
                tabBar={({ routeName, selectedTab, navigate }) => {
                    return (
                        <TouchableOpacity
                            onPress={() => {
                                changeUpDown(routeName)
                                navigate(routeName)
                                if (routeName === 'title1') {
                                    setHeaderTitle("For You")
                                } else if (routeName === 'title2') {
                                    setHeaderTitle("Completed")
                                } else if (routeName === 'title3') {
                                    setHeaderTitle("Your Account")
                                }
                            }}
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                            {_renderIcon(routeName, selectedTab)}
                        </TouchableOpacity>
                    );
                }}>
                <CurvedBottomBar.Screen
                    name="center"
                    position="center"
                    component={() => <GoOnline {...props} />}
                />
                <CurvedBottomBar.Screen
                    name="title1"
                    position="left"
                    component={() =>
                        <Home  {...props} />
                    }
                />
                <CurvedBottomBar.Screen
                    name="title2"
                    component={() => <Login {...props} />}
                    position="right"
                />
            </CurvedBottomBar.Navigator>

[hoaphantn7604]

Hi @YousefAlsbaihi ,
you can use useRef to reload the content inside.

[hoaphantn7604]

This issue has been resolved in version 2.0.0.