Not all tabs are accounting for the moving header

[dan-fein]

Current behavior

Currently if you are on Tab A (the first tab) and you scroll (and the header moves), and then move to Tab B, there will be some white space between the tab bar and the top of the content. This is likely due to only the active tab's content being shifted, as the other tabs (Tab B, C, etc.) remain in their initial spawn locations.

Then, if you tap on Tab B, C, etc. it will fix itself (the content will shoot to the top where it should be) but then if you go back to Tab A, then Tab A is at its original spawn position despite the tab bar being much higher.

Expected behaviour

The top of the content should always appear just below the tab bar.

Screenshots (if applicable)

This shows Tab A on load:

This shows Tab B after scrolling Tab A and swiping to B:

Same for C:

[andreialecu]

1) Is this using next/rc.0? 2) iOS or Android? 3) What settings are you using for the Container? 4) If you scroll any of the broken tabs does the header snap back into place?

(make sure you use the ScrollView/FlatList exported by this package and not the react native ones, for your tab content)

[dan-fein]

Good questions sorry @andreialecu , should have specified:

This is rc.0 on iOS.

This is my Container:

<Tabs.Container
      HeaderComponent={Header}
      headerHeight={headerHeight} // optional
      minHeaderHeight={200}
      >

HeaderHeight above is set onLayout of another component, lands at 400 and doesn't move after that but it's not known until after render.

Right now I'm noticing it's not collapsing the header anymore, and the line under the tab's name is not shifted to the active tab (probably 2 separate issues?). It will be hard to test this until I figure out what changed for the header to be static.

I'm using Tabs.FlatList. At one point I was passing Tabs does as a prop but found with this rc I can just import it in the component I need it in, so I'm doing that in the child component.

[andreialecu]

Which version of reanimated are you using? (just noticed that if it's not exactly reanimated 2.0.0-rc.0 there are some issues)

[dan-fein]

I can confirm both the scroll and the line under the active tab issues were fixed wheng oing from 2.0.0-rc.2 to 2.0.0-rc.0.

Still seeing the issue with the FlatLists though.

[andreialecu]

@danielfein try 4.0.0-rc.2