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.
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.
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.
(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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With