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.

Have you achieved this Michael? – Ken Pham May 13 '20 at 04:02 — Ken Pham, May 13 '20 at 04:02

score 7 · Answer 1 · edited Nov 19 '20 at 23:05

7

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.

edited Nov 19 '20 at 23:05

Dharman

30,962
25
85
135

answered Nov 19 '20 at 20:20

pedrobern

1,134
9
24

score 1 · Answer 2 · answered Nov 28 '18 at 18:16

1

One of the possible solutions is this.

Calculate the scroll position from the top of the tab component using onScroll callback method os ScrollView.
When the contentoffset.y is zero, so just make the component absolute and make its top: 0

answered Nov 28 '18 at 18:16

Siraj Alam

9,217
9
53
65

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

2 Answers2