React-native-tab-view: Customizing the TabBar with a sliding ScrollView

[paingha]

Current behaviour

The top tab bar works as expected but I am trying to turn it into a sliding top tab bar where the tabbar itself slides to display overflow of tab items. I wrapped the TabBar component in a horizontal scrollview in the renderTabBar. The current effect this gives is it slides as I want but anywhere on the screen i gesture to the right or left makes it slide. I think I somehow have to wrap the TabItem component that is being looped on in the scrollview instead.

Expected behaviour

The expected behavior is to have only the TabBar slide not the whole screen because right now the bottom content in the screen does not let me scroll down to it. The TabBar currently slides even if I gesture below it on other content to the right or left.

Code sample

<TabView navigationState={this.state} renderScene={SceneMap({ first: FirstRoute, second: SecondRoute, third: ThirdRoute, fourth: FourthRoute, fifth: FifthRoute, sixth: SixthRoute, })} onIndexChange={index => this.setState({ index })} swipeEnabled={false} renderTabBar={props => <ScrollView horizontal style={{width: width, height: 55, paddingBottom: -400, marginRight: 0, marginBottom: -400, elevation: 4}} showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 0, marginBottom: 0 }} decelerationRate={6.5} snapToInterval={width - 100} snapToAlignment={"center"} > <TabBar {...props} indicatorStyle={{ backgroundColor: 'white', fontSize: 16, fontWeight: '500' }} labelStyle={{ fontSize: 16, fontWeight: '400'}} tabStyle={{marginRight: 25}} style={{ backgroundColor: '#f4511e', height: 55, paddingBottom: 0, marginBottom: 0 }} /> </ScrollView> } initialLayout={{ width: Dimensions.get('window').width, height: 0 }} />

Screenshots (if applicable)

What have you tried

I tried wrapping the <ScrollView horizontal style={{width: width, height: 55, paddingBottom: -400, marginRight: 0, marginBottom: -400, elevation: 4}} showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 0, marginBottom: 0 }} decelerationRate={6.5} snapToInterval={width - 100} snapToAlignment={"center"} > {routes.map((route: T) => ( <TabBarItem key={route.key} position={position} route={route} tabWidth={tabWidth} navigationState={navigationState} scrollEnabled={scrollEnabled} getAccessibilityLabel={getAccessibilityLabel} getAccessible={getAccessible} getLabelText={getLabelText} getTestID={getTestID} renderBadge={renderBadge} renderIcon={renderIcon} renderLabel={renderLabel} activeColor={activeColor} inactiveColor={inactiveColor} pressColor={pressColor} pressOpacity={pressOpacity} onPress={() => { onTabPress && onTabPress({ route }); this.props.jumpTo(route.key); }} onLongPress={() => onTabLongPress && onTabLongPress({ route })} labelStyle={labelStyle} style={tabStyle} /> ))} </ScrollView>
in the TabBar.tsx with the ScrollView but it does not help. There maybe a whole better way to achieve what I am trying to do and any help would be appreciated. Thank you!

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | both
| react-native | 0.59.9
| react-native-tab-view | 2.7.1
| react-native-gesture-handler | 1.3.0
| react-native-reanimated | 1.1.0
| node | v10.7.0
| npm or yarn | 6.1.0

[satya164]

I'm not sure what you're trying to achieve, but you can completely replace the tab bar with renderTabBar with your own implementation. You don't need to use the exported TabBar.

There are examples in the README and example folder on how to implement a custom tab bar.

[Shiroe]

@paingha I had a similar use-case and I was able to make it work like below, it might not be the best solution but I hope it helps you or anyone else searching for this.

>
renderTabBar={(props) =>
horizontal={true}
style={{ flexGrow: 0 }}
showsHorizontalScrollIndicator={false}
scrollEventThrottle={200}
decelerationRate="fast"
>
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
/>

}
`

Essentially, I had to wrap the TabBar into a <ScrollView> with horizontal={true} and set flexGrow: 0.

flexGrow: 0 actually made it to contain the tab in the size it required, otherwise it took more height but again that might just be for my specific case.

[Pczek]

@Shiroe This worked great, thanks for the snippet! 👏

UPDATE: scrollEnabled does the trick. Ditch the ScrollView solution it was only causing issues...

[umairali4433]

isScrollable : true make my day