Tabs too long (Tab height)

Hi. Since a while I have the problem that my tabs always take the length of the longest tab … With prerenderingSiblingsNumber = {0} (default) it is the case that the first time the length is right, I change then in Tab 2 or 3, which are longer than the first and then back again, the first tab is much too long and shows a lot of white space at the end.

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues (like #508)
• For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

Node v11.8.0 npm 6.5.0 react-native 0.58.6 native-base 2.12.0 (same with version 2.13.5)

Expected behaviour

The individual tabs should only be as long as the content

Actual behaviour

The tabs are all as long as the longest tab (in my case, the last tab contains a list and can be very long)

Steps to reproduce

Imports import {ScrollableTab, Tab, TabHeading, Tabs} from 'native-base';

Inside main View

<Animated.ScrollView
    ref={ref => this._scrollView = ref}
    scrollEventThrottle={5}
    showsVerticalScrollIndicator={false}
    onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.nScroll}}}], {useNativeDriver: true})}
    style={{zIndex: 0}}
    contentContainerStyle={{paddingTop: this.state.tabIndex > 0 ? HEADER_HEIGHT : IMAGE_HEIGHT}}>
    <Tabs
        // prerenderingSiblingsNumber={0}
        onChangeTab={({i}) => {
            this.setState({contextMenu: {modalVisible: false, callContext: false}});
            // set header height for reading details
            this.animationByClick(i);
            // scroll each tab to top
            this._scrollView.getNode().scrollTo({y: 0, animated: true,});
        }}
        tabBarUnderlineStyle={{backgroundColor: StylingVariables.Colors.main_blue}}
        renderTabBar={(props) => <Animated.View
            style={{
		transform: [{translateY: this.tabY}], 
		zIndex: 1, 
		width: '100%', 
		backgroundColor: 'white', 
		marginBottom: 22,}}>
            <ScrollableTab {...props}
                           tabsContainerStyle={styles.styleTabsContainer}
                           renderTab={(name, page, active, onPress, onLayout) => (
                               <TouchableOpacity key={page}
                                                 onPress={() => onPress(page)}
                                                 onLayout={onLayout}
                                                 activeOpacity={0.4}>
                                   <Animated.View style={{flex: 1, height: 100, backgroundColor: StylingVariables.Colors.white}}>
                                       <TabHeading scrollable
                                                   style={{backgroundColor: 'transparent', paddingLeft: 40, paddingRight: 40, paddingTop: 15,}}
                                                   active={active}>
                                           <Animated.Text style={{
                                               fontFamily: StylingVariables.Fonts.Text.Regular,
                                               color: active ? StylingVariables.Colors.main_blue : StylingVariables.Colors.anthrazite,
                                               fontSize: 16,
                                           }}>
                                               {name}
                                           </Animated.Text>
                                       </TabHeading>
                                   </Animated.View>
                               </TouchableOpacity>
                           )}/>
            <LinearGradient style={styles.shadow} colors={['rgba(0,0,0,0.07)', 'transparent']}/>
        </Animated.View>
        }
	>
		<Tab heading={'Tab1'}>
			<ShortTab/>
		</Tab>
		<Tab heading={'Tab2'}>
			<MiddleTab/>
		</Tab>
		<Tab heading={'Tab3'}>
			<LongTab/>
		</Tab>
    </Tabs>
</Animated.ScrollView>

Is the bug present in both iOS and Android or in any one of them?

both, Android and iOS

Any other additional info which would help us debug the issue quicker.

I also tried wrapping each tab with a content-Tag, but the problem remains the same

[prafgup]

@appify-waheed I’ll try to make a snack and update here in a few days.

[pragupnewzera]

Try something like this, Fix the height of the parent widget to the maximum screen height you want that Tab Navigator to have.

<ListView or ScrollView>
 <View style={{height:  (width)/(0.8)}} >
    <Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <Tab.Screen name="T1" component={T1} />
      <Tab.Screen name="T2" component={T2} />
      <Tab.Screen name="T3" component={T3} />
    </Tab.Navigator>
   </View>
</ ListView or ScrollView>

And for tabs do Something like this

T1 ->

<View style={styles.container}>
  <ScrollView nestedScrollEnabled={true}>
    <FlatList
      numColumns={3}
      data={allMedia}
      keyExtractor={(item) => item.id}
      listKey={(post) => `${post.id}D`}
      renderItem={({ item }) => (Anything)}
      scrollEnabled ={false}
    />
  </ScrollView>
</View>

Remember to disable the scroll view Inside the FlatList of tabs and wrap with a ScrollView with nestedScrollEnabled={true}