React-native-tab-view: ScrollView not adjusting to TabPages with smaller content

[nickrobinson352]

I have a React Native App, which has a ScrollView as a root tab and a TabViewAnimated as the child with multiple tabs.

When the application runs in iOS, the ScrollView adjusts to the individual tab height and keeps growing if I switch to a Tab with more content but, it does not shrink when I visit a tab with less content, showing a lot of 'empty-space'.

The Child Component ('TabViewAnimated') has {flex : 1} and I have also set automaticallyAdjustContentInsets to true for the ScrollView. Any suggestions ?

[HoangTrung]

I run into the same problem. Please help.

[danieljodeci]

I'm having the same issue.

[HoangTrung]

Anyone knows how to fix it. I've been waiting for a solution for a long time. Please help.
Did you solve it ? @nickrobinson352 @danieljodeci

[CharlesMangwa]

Hi @nickrobinson352 @HoangTrung @danieljodeci! Can you provide a visual example of this issue please?
If I'm not mistaken, it seems a lot like what we have in ScrollViewsExample. You can have a look at it right here (the Scroll views example).

[HoangTrung]

Hi @CharlesMangwa,
Thanks for answering.
This is my problem. Please take a look on the following video
https://monosnap.com/file/dSbekn2Hfzohv0FxHPMo9t7T2bX8ej

[CharlesMangwa]

Thanks @HoangTrung, it's more clear now. However we can't help you without seeing your code… You can try to reproduce your bug on Sketch and send us the link, so that we can work from that base.

[satya164]

In most all cases resizing the whole tab view based on active tab is not desirable. For example, if you have a bottom tab bar or any content below the tab view it'll jump if tab view resizes.

The approach you're taking to achieve the header scroll effect is not how you should do it. Placing the whole tab view in a scrollview means any listview inside it won't be able to optimize the rows and all rows will be visible all the time. It'll give terrible performance once you have a large number of items.

You should instead use renderHeader prop to to render everything at top, and use animated API to animate it as you scroll. It's a bit extra work to do, but worth it. Example - https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e#.9oyv0tx0y

Alternatively you could use onLayout prop and adjust the height yourself when the active tab changes, but I'd highly recommend against it.

[wulucxy]

I run into the same problem. Please help.

[HoangTrung]

Thank @satya164,
The article's very useful for me.
It's a bit extra work to do, but worth it << Absolutely agree.
@wulucxy, you can try.
https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e#.9oyv0tx0y

[Donhv]

@HoangTrung can you share me code when react-native-tab-view combined with https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e

[ihinsdale]

@nickrobinson352 @HoangTrung @danieljodeci @wulucxy

I was having this issue and came up with a solution that allows continuing to use a TabView inside a ScrollView. (I wanted to continue using a TabView inside a ScrollView, despite @satya164's recommendation against it, because: (1) the performance concerns @satya164 describes are not applicable to my case, because I limit to a reasonable number the number of items that can appear in a FlatList inside my tab scenes, and (2) because the absolute-positioning-plus-animation approach described here and here is unsatisfactory because: (i) it obscures the RefreshControl of my FlatList, and (ii) using stickyHeaderIndices on my ScrollView is a much cleaner way to achieve the same outcome.)

My solution, in order to make the ScrollView "shrink when I visit a tab with less content", is to enforce a maximum height on all tab scenes that are not currently focused, where that maximum height is equal to the height of the currently focused tab scene. That way the ScrollView always thinks that it only needs to provide the ability to scroll the height of the current tab's content. You can see the solution here: https://github.com/Giraf-PBC/giraf-react-native-tab-view/blob/78d0ca44931cb1f9009f1d380aaace4b825366e8/src/TabView.tsx#L209

I've released my fork of this repo as giraf-react-native-tab-view: https://www.npmjs.com/package/giraf-react-native-tab-view

Thank you to @satya164 for his work on this library.