react-native: how to stick tab bar to top when scrolling?

Question

I am using react-native-tab-view for handling tabular navigation. Is it possible to, when scrolling down, have the tab bar scroll with, but stick to the top of the screen once it reaches the top? So something like ScrollView's stickyHeaderIndices.

Here's an example of what I want, where the tab bar "Posts, Comments, About" sticks to the top.

Ladybird

Have you achieved this Michael? – Kerikeriann

Have you?? @Marwin – Unfold

@Unfold Haven't done it – Kerikeriann

Answer 1

It's manageable to build with react-native-tab-view, but not so trivial. This week I published a package to specifically solve this issue, it is super simple to use here is the quick start example, and below is the demo.

Sisterly

Answer 2

One of the possible solutions is this.

1. Calculate the scroll position from the top of the tab component using onScroll callback method os ScrollView.

2. When the contentoffset.y is zero, so just make the component absolute and make its top: 0

Serpent