CODEWITHSUNDEEP
reactjsreact-nativetabbarreact-native-navigation
Syed Irfan
Syed Irfan

Reputation: 309

Automatically move Material tab bar in react native

I have a material top tab bar with 5 tabs. But all 5 tabs could't fit to a screen. in the screenshot below only 4 tabs visible. I need a behavior where tab bar shift automatically to the left when 3rd tab has been clicked. I searched the docs couldn't find anything similar.

here is app.js

material

class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <AppContainer />
      </View>
    );
  }
}
const AppTabNavigator = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home'
      }
    },
    Settings: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarlabel: 'Settings'
      }
    },
    Orders: {
      screen: OrdersScreen,
      navigationOptions: {
        tabBarlabel: 'Order List'
      }
    },
    Cancelled: {
      screen: CancelledItemsScreen,
      navigationOptions: {
        tabBarlabel: 'Cancelled Items'
      }
    },
    Others: {
      screen: OthersScreen,
      navigationOptions: {
        tabBarlabel: 'Others'
      }
    }
  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      tabStyle: {
        width: 100,
        overflow: 'hidden'
      }
    }
  }
);

const AppContainer = createAppContainer(AppTabNavigator);
export default App;

Upvotes: 2

Views: 727

Answers (1)

hong developer
hong developer

Reputation: 13916

You can try this code.

renderScene = ({ route }) => {
  if (Math.abs(this.state.index - this.state.routes.indexOf(route)) > 5) {
    return <View />;
  }

  return <MySceneComponent route={route} />;
};

Upvotes: 1

Related Questions