CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigation
HeelMega
HeelMega

Reputation: 508

React Native enable swipe navigation on tabs

I am using react-navigation and I am having an issue with it. I am trying to make it so the application changes tabs when a user swipes. However, I can't get it to work.

I have tried gestureEnabled and swipeEnabled keys but it doesn't seem to have an effect.

What am I doing wrong?

App:

const { Navigator, Screen } = createStackNavigator();
return (
    <NavigationContainer>
      <Navigator>
        <>
          <Screen options={{headerShown: false}} name={'BottomTabsNavigator'} component={BottomTabsNavigator}/>
          {/* All other routes beside bottom Navigation ones go below */}
          <Screen options={{title: 'EditProfile'}} name="EditProfile" component={EditProfile} />
          <Screen options={{title: 'ChangePassword'}} name="ChangePassword" component={ChangePassword} />
        </>
      </Navigator>
    </NavigationContainer>
  )
);

BottomNavigator:

const { Navigator, Screen } = createBottomTabNavigator();
export const BottomTabsNavigator = () => {
  return (
    <Navigator>
      <Screen name="Home" component={Home} />
      <Screen name="Profile" component={Profile} />
    </Navigator>
  );
};

Edit:

Here is the issue with createMaterialBottomTabNavigator

Settings screen have to be scrolled all the way to the bottom

Upvotes: 2

Views: 8228

Answers (2)

Sakilanand S T
Sakilanand S T

Reputation: 1

Since the tabBarPosition is no longer supported in the latest version, you can achieve top tab navigation at the bottom of the screen with swipe functionality by adjusting the tabBarStyle property. By setting the position to absolute and bottom, you can position the tab bar at the bottom while maintaining the swipe functionality.

<Tab.Navigator
    screenOptions={{
    tabBarStyle: {
        height: height * 0.05,
        position:'absolute', //ensures to tab to stay on the bottom
        bottom:height*0.03,   
>

Upvotes: 0

Ragnar
Ragnar

Reputation: 846

gestureEnabled and swipeEnabled are not supported in @react-navigation/bottom-tabs

You can use createMaterialTopTabNavigator instead of createMaterialBottomTabNavigator and set the tabBarPosition option to bottom

reference from :- StackOverflow answer

Upvotes: 5

Related Questions