Nativebase: Tabs flickering and longest height issue

[peter1a]

When scrolling inside tabs, it starts flickering and all time staying on top - iOS
If changing between tabs and if one tab is longer than another, shorter tab gets also longer height - Android

react-native, react and native-base version

react-native-0.41.2
native-base-2.0.6

[sankhadeeproy007]

Please attach screenshots.

[sankhadeeproy007]

@peter1a any updates here?

[peter1a]

Upload a video https://vid.me/RTad

[peter1a]

Any news about this bug? My app is already in production and customers already told me about this problem..

[sankhadeeproy007]

Hi, I've trying but wasn't quite able to reproduce the bug. In the example you can see that I've added two Tabs of varying heights, yet there's no flicker.

[peter1a]

It looks it is problem if i use ListItems if use View works ok.

[sankhadeeproy007]

I've tried List here as well
https://github.com/GeekyAnts/NativeBase/issues/577#issuecomment-283928206

[peter1a]

Finnaly found what was problem, always Content component should be inside as parent and than everythings work perfect.

[krunalp1993]

@peter1a Can you share more information? I am having same issue..

[masiamj]

+1

[rvirani1]

+1. The scroll height issue is not fixed.

[ngocdb]

+1. The scroll height issue is not fixed.

[shiundu]

I have the same issue

[447491480]

i have the save issue too

[IslamTareq0012]

@peter1a what do you exactly mean by "Content component"

[milk-shake]

+1 scroll height issue when one tab requires scrolling to the end, the other tabs also can scroll the same distance even though their content fits on one screen. Even using <Content> as the tab root component doesn't help.

EDIT:
As per usual, just as soon as I comment, I managed to figure out the issue and fix it. I'll leave a solution here for others:

In the main tab component don't wrap them/ it in a <Content> component (which kind of makes sense)

and in each <Tab>, wrap the content within in a <Content> instead - which allows for individual length scrolling.

[akhil-geekyants]

[OogieBoogieInJSON]

@milk-shake is right. It makes sense to have the Content inside the Tab because otherwise the longest tab will stretch the content, meaning all other tabs will have the same height. Just flex doing his job :/

[priyarg]

i did content inside tab but my whole page is scrolled up when i go over the list

[akhil-geekyants]

@priyarg tried a code similar to this. Couldn't find any issue. Attaching a gif

Gif

[priyarg]

Thanks. solved my issue.

[Zilleabbas10]

Still getting height issue in tabs. i have two tabs and my tabs adopt height of the tab which have heighest height. please help, i have implmented almost all solutions either by placing content of tab with in <Content> tag or by passing whole data to Flatlist. your help is appreciated in advance. Thankyou

[SupriyaKalghatgi]

@Zilleabbas10 Please check above comments, snippets for help
Also check NativeBase KitchenSink and try replicating your use case there