CODEWITHSUNDEEP
react-nativereact-native-tab-view
Uni
Uni

Reputation: 187

React native tab view width when there are many tabs

I'm using https://github.com/react-native-community/react-native-tab-view But my problem is

  1. When there are many tabs, it will only display on the screen with and the heigh will expand. What I'm looking for is the heigh is fixed, the width expands based on tabs
  2. When moving between tabs, it seems to reload the view on each tab

I appreciate all your advice to fix my problem. Thank you

enter image description here

Upvotes: 1

Views: 5813

Answers (4)

Ahmed Samir
Ahmed Samir

Reputation: 61

You can specify width: 'auto' in tabStyle

Upvotes: 6

Kim Thành Vũ
Kim Thành Vũ

Reputation: 71

try add:

scrollEnabled

and give width in style like this:

style={{ width: 300 }}

you can read more in here: https://github.com/react-native-community/react-native-tab-view

Upvotes: 1

egzonmustafa
egzonmustafa

Reputation: 115

You need to export title at _renderLabel function....

       _renderLabel = ({ route }) => (
           <Text style={styles.label}>{route.title}</Text>
       );

        <TabBar
            {...props}
            scrollEnabled={true}
            renderIndicator={() => null}
            ref={component => this.scrollRef = component}
            renderLabel={this._renderLabel}
            tabStyle={styles.tab}
            style={{ backgroundColor: '#284062'}}
        />

After this, you can style text :)

Upvotes: 0

Vikas Jadhavar
Vikas Jadhavar

Reputation: 31

<TabView
  labelStyle={fontSize:12} //---------->Add this line and reduce the fontsize
  navigationState={this.state}
  onIndexChange={index => this.setState({ index })}
  renderScene={SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  })}
/>

Upvotes: 0

Related Questions