Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

reddit example

like image 631
Michael Hsu Avatar asked Nov 28 '18 17:11

Michael Hsu


People also ask

How do I scroll to the top in React Native?

To scroll to top of the ScrollView with React Native, we assign a ref to the ScrollView and call scrollTo on the ref's value. to create a ref with useRef and set that as the value of the ref prop of the ScrollView . Then we add a Button that calls ref. current.

How do you add a top tab in React Native?

To create a Top Tab Navigator, we need to use the createMaterialTopTabNavigator function available in the react-navigation library. It is designed with the material theme tab bar on the top of the screen. It allows switching between various tabs by tapping them or swiping horizontally.

How do you style the top tab navigator in React Native?

(createMaterialTopTabNavigator) The material style createMaterialTopTabNavigator is used to create tab navigator on the top of the screen. It provides functionality to create and display multiple screens routers. These screens are switches between each other by tapping route or swiping horizontally.


1 Answers

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.

like image 156
pedrobern Avatar answered Sep 17 '22 14:09

pedrobern