tabStyle={{width: 'auto'}} in `TabBar` makes indicator not visible on web

[mathias-berg]

Current behaviour

I'm using this for web and as soon as I set tabStyle={{width: 'auto'}} in TabBar then the indicator goes away. I can't make it appear again unless I set a specific width.

Expected behaviour

The indicator should show just like on Android or iOS when width in tabStyle is set to auto.

Code sample

const renderTabBar = (props) => ( <TabBar {...props} tabStyle={{width: 'auto'}} // As soon as auto is set, the indicator goes away on web. scrollEnabled /> );

return ( <TabView navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={initialLayout} style={styles.container} renderTabBar={renderTabBar} /> );

Screenshots (if applicable)

Link to Snack example. https://snack.expo.io/@fyranollfyra/react-native-tab-view-quick-start

Your Environment

software	version
ios or android	-
expo	40.0.0
react-native	0.63.20
react-native-tab-view	2.15.2
react-native-gesture-handler	1.7.0
react-native-reanimated	1.13.0
node	14.8.0
npm or yarn	Yarn 1.22.5

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• expo (found: 40.0.0, latest: 40.0.1)
• react-native (found: 0.63.20, latest: 0.63.4)
• react-native-gesture-handler (found: 1.7.0, latest: 1.9.0)
• react-native-reanimated (found: 1.13.0, latest: 1.13.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[Manju-lab]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• expo (found: 40.0.0, latest: 40.0.1)
• react-native (found: 0.63.20, latest: 0.63.4)
• react-native-gesture-handler (found: 1.7.0, latest: 1.9.0)
• react-native-reanimated (found: 1.13.0, latest: 1.13.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Yes the issue still exists, I have all the latest version of the above packages but still facing this issue

[okwasniewski]

This issue is fixed when trying the snack with [email protected], closing this.