Nativebase Tabs not changing content when changing page value

Question

I am having problems with navigating to a tab from another screen. When I am on the page clicking the tabs, the content switches fine, but when I try to set the active tab from another component before navigating to that screen, I am having issues with going to the specified tab.

I've tried passing parameters through the navigation to the parent screen like this: this.props.navigation.navigate('Menu', {goToOrderDetails: true}) and then inside the Menu screen, I made a componentFocused function where every time the page is in focus, I am checking if that goToOrderDetails parameter is true, and if it is, I am manually setting the state variable that is being used to set the active tab. This, however, is not working and just returns directly to the default tab (0), however, the styling color indicators are on the correct tab, but the content is that of the first tab.

This is how I am currently trying to do it: Here is the Menu screen:

import React, {Component} from 'react';
import {observer} from "mobx-react";
import {ScrollView} from 'react-native';
import {Container, Tab, Tabs, ScrollableTab} from 'native-base';
import OrderHistory from './OrderHistory';
import Favorites from '../components/Favorites';
import Heading from '../components/Heading';
import store from '../store/store';
import i18n from 'i18n-js';

class Menu extends Component {
    constructor() {
        super();
        this.subs;
        this.state = {
            activeTab: 0, 
            initialPage: 0
        };
    }

     getTab() {
        if(this.props.navigation.state.params){
            if(this.props.navigation.state.params.page == 'orderhistory') {
                return 2;
            }if(this.props.page == 'favorites'){
                return 1;
            }else{
                return 0;
            }
        } else {
            if (this.props.navigation.getParam('orderHistory') || store.toOrderHistory == true) {
                return 2;
            } else if (this.props.navigation.getParam('favorites')) {
                return 1;
            }
            store.toOrderHistory.set(false);
        }
    }

    componentDidMount() {
        this._componentFocused();
        this._sub = this.props.navigation.addListener(
            'didFocus',
            this._componentFocused
        );
    }

    _componentFocused = () => {
        store.updateActiveTab(this.getTab());
    }

    updateTab(tab) {
        store.updateActiveTab(tab.i);
    }

    render() {
        return (
            <Container>
                <Heading title={'Menu'} />
                    <Tabs onChangeTab={(tab) => {this.updateTab.bind(this, tab)}} 
                          page={store.activeTab.get()} 
                          renderTabBar={()=> <ScrollableTab />}> 
                        <Tab heading={i18n.t('menu.all_tab')}>
                            <ScrollView>
                                {this.displayMenu()}
                            </ScrollView>
                        </Tab>
                        <Tab heading={i18n.t('menu.fav_tab')}>
                            <Favorites></Favorites>
                        </Tab>
                        <Tab heading={i18n.t('menu.recent_tab')}>
                            <OrderHistory></OrderHistory>
                        </Tab>
                    </Tabs>
            </Container>
        )
    };
}

export default observer(Menu);

And I am trying to send the navigation parameter from the order details screen to this screen like this: this.props.navigation.navigate('Menu',{goToOrderDetails: true}) and when that parameter is true, I am updating the store activeTab value like this: store.updateActiveTab.set(2). The strangest part is that if I console.log the tab value, it is 2! Which is the correct one I need it to be on! And as I mentioned earlier, the color of the title is also the active color! It is just the content and the color underline that are not on that tab. Is it possible that it is necessary to refresh the entire tabs component so that I can change the active tab from another screen? I am not sure why this behavior is occurring and could use some help!

Here is a screenshot of what happens after I have manually changed the active tab from the order details component!

Answer 1

I am also using same tab and implement as below:

<Tabs ref={(c) => { this.bottomTabRef = c; }} initialPage={0} page={pageNum} onChangeTab={({ from, i }) => { this.setState({ pageNum: i }); this.bottomTabRef.goToPage(0); }}>
<Tab heading="tab1"> 
<Text> Tab1 </Text>
</Tab>
<Tab heading="tab2"> 
<Text> Tab2 </Text>
</Tab>
</Tabs>