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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 25 (2 by maintainers)

Most upvoted comments

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

prafgup on Jun 12, 2020

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}

pragupnewzera on Jun 11, 2020

Same issue here tabs are taking the height of the longest tab, As mentioned here. https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/415 A fix could be in this https://github.com/turfaa/react-native-scrollable-tab-view-universal

waheedakhtar694 on Apr 6, 2020

I had this problem too a while ago. Make sure you wrap your Animated.ScrollView in <Container> provided by native base (Container should be the first tag in the class you use for the tabs). Also, for the content of each tab to be displayed properly, you need to wrap each child component of each tab in a <Content>. This is what worked for me. For example : native base fix1.pdf

andreeaohno on Oct 17, 2019