How to pass props to a function in BottomTabNavigator

Question

I have searched quite a bit in SO and haven't found a working solution to my problem,

Problem Statement : I have BottomTabNavigator with 5 tabs. Everytime i switch the tab i need to make an api call to fetch latest information. And to fetch latest information i need to have the redux store values that i need to use to make the api call. So how do i make those redux store values available in the function call that i make on tabChange?

Below is my function which needs to be called followed by the BottomTabNavigator,

    fetchProfile = () => {
        const {selectedPerson, dispatch, actions} = this.props
        let Id = selectedPerson.Id
        let personId = selectedPerson.placeId
        dispatch(actions.getPersonDetails(Id, personId))
    }

    export const Tabs = createBottomTabNavigator({
        Profile: { 
            screen: ProfileConnector,
            navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor} onPress={() => fetchProfile()}/>,
            },
            // navigationOptions: ({ navigation }) => ({
            //     tabBarOnPress: (tab, jumpToIndex) => {
            //       console.log('onPress:', tab.route);
            //       jumpToIndex(tab.index);
            //     },
            //     tabBarLabel: 'Profile',
            //     tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor}/>,
            //   }),
        },
        Inbox: { 
            screen: InboxConnector,
            navigationOptions: {
                tabBarLabel: 'Inbox',
                tabBarIcon: ({tintColor}) => <Icon name="inbox" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Bling: {
            screen: BlingConnector,
            navigationOptions: {
                tabBarLabel: 'Bling',
                tabBarIcon: ({tintColor}) => <Icon name="hand" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Calendar: {
            screen: CalendarConnector,
            navigationOptions: {
                tabBarLabel: 'Calendar',
                tabBarIcon: ({tintColor}) => <Icon name="calendar" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Misc: {
            screen: Misc,
            navigationOptions: {
                tabBarLabel: 'Misc',
                tabBarIcon: ({tintColor}) => <Icon name="bar-graph" size={px2dp(22)} color={tintColor}/>,
            },
        },
    }, {
        initialRouteName: 'Inbox',
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        scrollEnabled: true,
        tabBarOptions: {
            activeTintColor: 'teal',
            inactiveTintColor: '#424949',
            activeBackgroundColor: "white",
            inactiveTintColor: '#424949',
            labelStyle: { fontSize: 14 },
            style : { height : 50},
        }
    });

Any help is much appreciated, i'm loosing my mind over this. I have tried the commented out section above and with that it throws jumpToIndex is not a function and the other option doesn't have the redux store values.

Please help. :( Thanks, Vikram

Answer 1

"Everytime i switch the tab i need to make an api call to fetch latest information."

You can detect willFocus/didFocus event of react-navigation and then fetch api

react-navigation: Detect when screen is activated / appear / focus / blur