Tab View item was stretched when other item has different height

[felixliu226]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

I put the tab in a scroll view, there is some components above the tab, I'd like to put the tab's position as relative so it will move to top when the screen is scrolled down.

For the tab view, there are two view with different content length.

Expected behavior

Each tab view's height will be adjusted according to it's content.

Describe the bug

For the view with less content, there is an extra white space at the bottom, and its height is stretched.

Steps To Reproduce

You may refer to this snack https://snack.expo.dev/Bl9V_7zoz

Screenshots

No response

Your Environment

react-native-elements: 3.4.2
react-native: 0.64

[arpitBhalla]

Can you try with latest version?

[felixliu226]

Hi, I just tired the version 4.0.0-rc.1, but the issue comes more complex.

My design is that there is an image on the top of screen, and then there is a tab to switch between 2 views, I hope the tab's position is relative to the page, and it could move to top when scroll the page.

However, if I wrapped the tab and tabview with ScrollView component, the TabView item cannot be seen in the screen...

You may refer to this: https://snack.expo.dev/@felixliu_labviso/rne-tab

Thanks.

[arpitBhalla]

Can you try this?

containerStyle={{height:Dimensions.get("screen").height}}

[felixliu226]

Thanks for the quick response, after added the contentContainerStyle to ScrollView, the TabView is visible but the page cannot be scrolled.

I have updated the snack (https://snack.expo.dev/@felixliu_labviso/rne-tab) for your reference. Thx

[arpitBhalla]

No, I mean, add containerStyle to TabView, You need to specify the height for TabView

[felixliu226]

But for my case, each tab's height is different and are based on the content length. If i add the containerStyle to TabView, then all TabView are stretched to the largest height.

[vimukthinuclei]

@felixliu226 Wrap the tabView with a View tag and change the height using a argument

    <View
      style={
        tabIndex === 0
          ? styles.tabViewStream(myStream)
          : styles.tabViewRequest(myRequest)
      }>
      <TabView
        value={tabIndex}
        onChange={setTabIndex}
        animationType={'spring'}>
        <TabView.Item style={styles.tabView}>
          <VideoList videos={myStream} navigation={navigation} />
        </TabView.Item>
        <TabView.Item style={styles.tabView}>
          <RequestList videos={myRequest} navigation={navigation} />
        </TabView.Item>
      </TabView>
    </View>

tabView: { width: '100%', marginTop: '3%', }, tabViewStream: videosStream => ({ height: videosStream.length > 0 ? (tileHeightStream + 16) * Math.ceil(videosStream.length / 2) + 30 : Dimensions.get('window').height * 0.4, }), tabViewRequest: videos => ({ height: videos.length > 0 ? (tileHeight + 16) * videos.length + 30 : Dimensions.get('window').height * 0.4, }),

[mrrenaud]

But for my case, each tab's height is different and are based on the content length. If i add the containerStyle to TabView, then all TabView are stretched to the largest height.

@felixliu226 Did you manage to make the height dynamic based on the tab item content, without having to compute the height based on hardcoded values ?

[felixliu226]

But for my case, each tab's height is different and are based on the content length. If i add the containerStyle to TabView, then all TabView are stretched to the largest height.

@felixliu226 Did you manage to make the height dynamic based on the tab item content, without having to compute the height based on hardcoded values ?

@mrrenaud No, I just used two <View> component with fade in /fade out animation, not using TabView...

[derochedesign]

Running into this issue now; would love to see this fixed. It seems that no Tab providing package supports the tabs in a scrollview without hacky height setting.