How we can use swipe in react navigation V3 with bottomTabNavigator

Question

I'm using react navigation V3 and i want to use swipe in my bottomTabNavigator. i can't do it because createBottomTabNavigator don't support it any yet and createBottomNavigator is actually deprecated. It is very annoying because in react navigation V2 we can do iteasily. Just createMaterialTopTabNavigator support swipe but i want a bottom navigator and not a top one

Answer 1

If you take a look at the documentation for createMaterialTopTabNavigator you can see that in the TabNavigatorConfig there is the ability to set the position of the tab bar using tabBarPosition

Position of the tab bar, can be 'top' or 'bottom', default is top

So if you use createMaterialTopTabNavigator instead of createMaterialBottomTabNavigator and set tabBarPosition: 'bottom' in your config you should get a createMaterialTopTabNavigator but at the bottom.

Here is what it should look like in code

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1',
  tabBarPosition: 'bottom' // <- add this line to your config
}

const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);

Here is a snack showing it working https://snack.expo.io/@andypandy/materialtopnavigator-at-the-bottom