React native Tab View congested when number of tab is increase

Question

I am using react-native-tab-view for display tab on the top of the screen. Screen view looks congested in case of number of screen is going to increase (more than 5)

Below is my code snippet

export default class CustomTabViewComponent extends React.Component{
state = {
    index: 0,
    routes: [
      { key: 'tab1', title: 'Tab1' },
      { key: 'tab2', title: 'Tab2' },
      { key: 'tab3', title: 'Tab3' },
      { key: 'tab4', title: 'Tab4' },
      { key: 'tab5', title: 'Tab5' },
    ],
  };
render(){
   return(
   <TabView
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this._renderTabBar}
          onIndexChange={this.onIndexChange}
          initialLayout={{
            width: Dimensions.get('window').width,
            height: 100,
          }}
        />

)}
}

I am posting image also for reference.

Is there any property with the help of that i can make TabView scrollable to the right with individual tab fix width ?

PS: I have try react-native-scrollable-tab-view but stuck at the same place.

Answer 1

pass renderTabBar prop to TableView which returns a custom React Element and return <TabBar>, add tabStyle and scrollEnabled={true} to TabBar.

renderTabBar - Callback which returns a custom React Element to use as the tab bar

TabBar - Material design themed tab bar.

scrollEnabled - Boolean indicating whether to enable scrollable tabs.

tabStyle - Style to apply to the individual tab items in the tab bar.

import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

<TabView
  navigationState={this.state}
  renderScene={this.renderScene}
  renderTabBar={this._renderTabBar}
  onIndexChange={this.onIndexChange}
  renderTabBar={props => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: 'white' }}
      tabStyle={{ width: 100 }}
      scrollEnabled={true}
      style={{ backgroundColor: 'blue' }}
    />
  )}
  initialLayout={{
    width: Dimensions.get('window').width,
    height: 100,
  }}
/>

Demo