React native tab view width when there are many tabs

Question

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

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
When moving between tabs, it seems to reload the view on each tab

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

score 6 · Answer 1 · edited Jan 03 '21 at 08:46

6

You can specify width: 'auto' in tabStyle

edited Jan 03 '21 at 08:46

Imran Rafiq Rather

7,677
1
16
35

answered Jan 03 '21 at 07:24

Ahmed Samir

61
1
2

1

tabBarItemStyle:{width:'auto'} helped me in react-navigation 6 to address this problem – Rahul.S Oct 28 '21 at 07:51

score 1 · Answer 2 · answered Feb 10 '20 at 04:52

1

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

answered Feb 10 '20 at 04:52

Kim Thành Vũ

71
3

scrollEnabled nice but not enough, using it with width: 'auto' makes it perfect – Serdar D. Feb 02 '23 at 00:22

score 0 · Answer 3 · answered Dec 12 '18 at 09:50

0

<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,
  })}
/>

answered Dec 12 '18 at 09:50

Vikas Jadhavar

31
1
7

2

While this answer might resolve the OP's question, it is suggested that you explain how it works and why it resolves the issue. This helps new developers understand what is going on and how to fix this and similar issues themselves. Thanks for contributing! – Caleb Kleveter Dec 12 '18 at 12:54

score 0 · Answer 4 · answered Jan 14 '19 at 17:49

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 :)

React native tab view width when there are many tabs

4 Answers4