How can i get bottom TabBar on Rect Native (Android) with React Navigation

Question

I do like this https://github.com/react-community/react-navigation/issues/801 but it's can't work , it's always on top (Android)

How i can do to move TabBar to bottom of screen

export const Tabs = TabNavigator({
  Feed: {
    screen: FeedStack,
    navigationOptions: {
      header: null,
      tabBarLabel: 'Module',
      tabBarIcon: ({ tintColor }) => <Icon namax="list" size={35} color={tintColor} />,
    },
  },
  Min: {
    screen: Min,
    navigationOptions: {
      header: null,
      tabBarLabel: 'Min',
      tabBarIcon: ({ tintColor }) => <Icon namax="list" size={35} color={tintColor} />,
    },
  },

  max: {
    screen: max,
    navigationOptions: {
      header: null,
      tabBarLabel: 'max',
      tabBarIcon: ({ tintColor }) => <Icon namax="account-circle" size={35} color={tintColor} />
    },
  },

});

Answer 1

The general Api for TabNavigator is TabNavigator(RouteConfigs, TabNavigatorConfig). TabNavigatorConfig has various options one of them is tabBarPosition which takes 'top' or 'bottom'. Default is 'top' for android so change it to 'bottom' as shown below.

Check React-Navigation Tab docs

export const Tabs = TabNavigator(
  {
    Feed: {
      screen: FeedStack,
      navigationOptions: {
        header: null,
        tabBarLabel: 'Module',
        tabBarIcon: ({ tintColor }) => <Icon namax="list" size={35} color={tintColor} />,
      },
    },
    Min: {
      screen: Min,
      navigationOptions: {
        header: null,
        tabBarLabel: 'Min',
        tabBarIcon: ({ tintColor }) => <Icon namax="list" size={35} color={tintColor} />,
      },
    },

    max: {
      screen: max,
      navigationOptions: {
        header: null,
        tabBarLabel: 'max',
        tabBarIcon: ({ tintColor }) => <Icon namax="account-circle" size={35} color={tintColor} />
      },
    }
  },
  {
    tabBarPosition: 'bottom'
  }
);