React Native: Change bottomTabNavigator route programmatically

Question

I have this set up on my MainTabNavigator . It works fine if I just click the bottom navigator itself.

MainTabNavigator.js

import React from "react";
import { Platform } from "react-native";
import {
  createStackNavigator,
  createBottomTabNavigator,
  createDrawerNavigator
} from "react-navigation";

import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/main/HomeScreen";
import SettingsScreen from "../screens/main/SettingsScreen";
import InProgressScreen from "../screens/main/InProgressScreen";
import LeftSliderScreen from "../screens/main/LeftSliderScreen";
import { addHeaderLeftNavigator } from "../helpers";
import ChangePassword from "../screens/main/profile/ChangePassword";
import EditProfile from "../screens/main/profile/EditProfile";
import { Icon } from "native-base";

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  ChangePassword,
  EditProfile,
  InProgress: InProgressScreen
});

/* eslint-disable react/prop-types, react/display-name */
HomeStack.navigationOptions = {
  tabBarLabel: "New SR",
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === "ios"
          ? `ios-information-circle${focused ? "" : "-outline"}`
          : "md-information-circle"
      }
    />
  )
};

const SettingsStack = createStackNavigator({
  Settings: {
    screen: InProgressScreen,
    navigationOptions: ({ navigation }) => {
      const headerLeftNav = addHeaderLeftNavigator(navigation);
      const { params } = navigation.state;
      return {
        ...headerLeftNav,
        headerRight: (
          <Icon
            type="FontAwesome5"
            name="circle"
            size={24}
            onPress={() => {
              params._setModalVisible(true);
            }}
            style={{
              marginRight: 15,
              marginTop: 0,
              color: params && params.driver_status ? "lightgreen" : "red"
            }}
          />
        ),
        title: "Service Request",
        headerTintColor: "#ffffff",
        headerStyle: {
          backgroundColor: "#2495C1",
          borderBottomColor: "#ffffff",
          borderBottomWidth: 0
        },
        headerTitleStyle: {
          fontSize: 18
        }
      };
    }
  }
});

SettingsStack.navigationOptions = {
  tabBarLabel: "In Progress",
  tabBarIcon: ({ focused }) => {
    return (
      <TabBarIcon focused={focused} name={Platform.OS === "ios" ? "ios-options" : "md-options"} />
    );
  }
};

const BottomTabNavigator = createBottomTabNavigator({
  HomeStack,
  SettingsStack
});

export default createDrawerNavigator(
  {
    BottomTabNavigator: BottomTabNavigator
  },
  {
    contentComponent: LeftSliderScreen
  }
);

But on my HomeScreen I have a feed of data that when user click the accept button it should redirect to the InProgress tab.

If I use this.props.navigation.navigate('InProgress') it opens a new navigation instead of changing the tab and you can tell it because the tab is not focused on the InProgress tab.

HomeScreen.js

_acceptingRequest = async id => {
    this.props.navigation.navigate("InProgress");

    return false;
....

Answer 1

Ohh I got it just set the param name on

const BottomTabNavigator = createBottomTabNavigator({
  HomeStack,
  InProgressTab: SettingsStack
});

And that's what I need to call instead. It changes the tab now my bad.