React native bottom tab navigate to desire screen

Question

First I create Bottomtabs and import in Core navigator;

const BottomTabs = createBottomTabNavigator();
function BottomTabNavigator({ navigation, route }) {


  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen
        name="ExploreTab"
        component={ExploreNavigator}
      />

      <BottomTabs.Screen
        name="FormScreen"
        component={ProfileNavigator}
        options={({ navigation }) => ({
          tabBarLabel: "",
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                console.log({ navigation });
                navigation.navigate("FormScreen");
              }}
            >
              <View>
                <Icon
                  type="font-awesome-5"
                  name="plus"
                  size={moderateScale(25)}
                  color={Colors.white}
                />
              </View>
            </TouchableOpacity>
          ),
        })}
      />
      <BottomTabs.Screen
        name="ProfileTab"
        component={ProfileNavigator}
      />
    </BottomTabs.Navigator>
  );
}
export default BottomTabNavigator;

The bottom tab navigator is part of the core navigator and the core navigator is the app-level navigator.

function CoreNavigator() {
  return (
    <CoreStack.Navigator>
      <CoreStack.Screen
        name="BottomTabNavigator"
        component={BottomTabNavigator}
        options={{
          headerShown: false,
        }}
      />
      <CoreStack.Screen name="AboutScreen" component={AboutScreen} />
      <CoreStack.Screen name="WebScreen" component={WebScreen} />
    </CoreStack.Navigator>
  );
}

when I click on the bottom tab middle plus button. It should navigate to the form screen FormScreen.

Check image

In simple words below code not working which is present at the Botton tab navigator. when I click on the bottom plus button Bellow app navigates to ProfileNavigators default screen. I want the app to navigate to FormScreen.

<BottomTabs.Screen
        name="FormScreen"
        component={ProfileNavigator}
        options={({ navigation }) => ({
          tabBarLabel: "",
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                console.log({ navigation });
                navigation.navigate("FormScreen");
              }}
            >
              <View>
                <Icon
                  type="font-awesome-5"
                  name="plus"
                  size={moderateScale(25)}
                  color={Colors.white}
                />
              </View>
            </TouchableOpacity>
          ),
        })}
      />

Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Sep 25 '21 at 12:28

score 0 · Answer 1 · answered Sep 17 '21 at 15:51

0

Try to use:

navigation.reset({
  index: 0,
  routes: [{ name: 'FormScreen' }],
});

Instead of navigation.navigate("FormScreen");

answered Sep 17 '21 at 15:51

Michael Bahl

2,941
1
13
16

Thanks for the replay, but still navigate to the default screen. But this time screen refreshes every time when I click on plus button. – Mayur Patil Sep 17 '21 at 16:00

React native bottom tab navigate to desire screen

1 Answers1