Globally accessible variable to control Bottom Tab Navigator in React Native app

Question

I am using createBottomTabNavigator from @react-navigation/bottom-tabs to make a nice bottom navigation for my application. I have added some custom notification indicators for the tab bar icons, that illustrates "news" inside the specific stacks. These icons (dots) should be visible if a variable is true and otherwise the dot shoul be hidden. The variable will be depending on the content of the stack so if there are new messages in the MessagesStack, the unread_messages = true and so on...

I am looking for a solution where I can access these variables in my TabStack from the specific stacks, so when I call the API in the MessagesStack and there is a new message, I can update unread_messages in the TabStack and show the dot.

I have pasted the full code for my TabStack in the App.js-file below:

TabStack = () => {

            StatusBar.setBarStyle("dark-content");
            const insets = useSafeAreaInsets();

            return (
                <View style={main_Styles.mainBackground}>
                    <View style={{ flex: 1, paddingBottom: insets.bottom,}} >
                        <View style={{ flex: 1}} >

                            <Tab.Navigator

                                screenOptions={({ route }) => ({

                                    tabBarIcon: ({ focused, color, size }) => {

                                        let iconOpacity = (focused) ? 1.0 : 0.2;
                                        let iconSize = 28;

                                        if (route.name === 'HomeStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='home_white' size={iconSize} opacity={iconOpacity}/>
                                                </View>
                                            );
                                        }

                                        if (route.name === 'MessagesStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='messages_white' size={30} opacity={iconOpacity}/>
                                                    {((unread_messages ?? 0) > 0) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3}} />}
                                                </View>
                                            );
                                        }

                                        if (route.name === 'GroupsStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='group_white' size={iconSize} opacity={iconOpacity}/>
                                                </View>
                                            );
                                        }

                                        if (route.name === 'NotificationsStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='notifications_white' size={iconSize} opacity={iconOpacity}/>
                                                    {((unread_notifications ?? 0) > 0) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3, marginTop: 1}} />}
                                                </View>
                                            );
                                        }

                                        if (route.name === 'MyProfileStack') {

                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <View style={{marginTop: 3, flexDirection: 'row', width: 24, height: 24, borderRadius: 12, opacity: iconOpacity, borderColor: Main.colours.red_light, borderWidth: 0, overflow: 'hidden'}}>
                                                        <ProfileImage style={{flex: 1, backgroundColor: 'red'}} image_url={this.state.profile_image_url} initials={this.state.initials}/>
                                                    </View>
                                                    {(pending_friend_requests > 0 || pending_event_applications > 0 || pending_group_applications > 0 ) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3, marginTop: 2}} />}
                                                </View>
                                            )
                                        }
                                    },

                                    headerShown: false,
                                    lazy: false,
                                    optimizationsEnabled: false,
                                    animationEnabled: true,
                                    activeTintColor: Main.colours.white,
                                    showIcon: true,
                                    swipeEnabled: Platform.OS === 'ios' ? true : false,
                                    tabBarShowLabel: false,
                                    scrollEnabled: true,

                                    tabBarStyle: {
                                        backgroundColor: Main.colours.red_medium,
                                        borderTopWidth: 0,
                                        shadowOpacity: 0,
                                        elevation: 0,
                                        paddingTop: 0,
                                        paddingBottom: 0,
                                        height: 49,
                                    },

                                    tabBarIndicatorStyle: {
                                        backgroundColor: 'transparent',
                                    },

                                })}>

                                <Tab.Screen name="HomeStack" component={HomeStack} />
                                <Tab.Screen name="MessagesStack"  component={MessagesStack}/>
                                <Tab.Screen name="GroupsStack" component={GroupsStack}/>
                                <Tab.Screen name="NotificationsStack" component={NotificationsStack} />
                                <Tab.Screen name="MyProfileStack" component={MyProfileStack} />
                            </Tab.Navigator>
                        </View>
                    </View>
                </View>
            );
        }

score 1 · Accepted Answer · answered Nov 08 '21 at 04:44

Here, there are three solutions for updating icons in the tab

First, create Tab Icon as a functional component and then you can bind the API with redux, and once redux is updated, it will update the tab icon component, use redux context
Use global app context. for eg. create one state in the main app context and update that context once your API call is done so it will automatically update your tab component
fire local notification and update date the tab component(not recommended)

Globally accessible variable to control Bottom Tab Navigator in React Native app

1 Answers1