React Native: Creating custom tabs with animation
I have this use case which is a bit confusing compared to the norm , and Im not sure how to structure it. I have a screen (tabs) with 4 tabs . The thing is that the contents of each tab (their screens) are actually in One big page, when scrolling down the page and it reaches the contents of Tab2 , the tab should change too to Tab2 (its not actually a screen change) . Now initially I have used react-navigation and it's tab navigator. But here Im not sure if this should use tab navigator. The questions that arise to me (from the top of my head): Q1) If we wrap the components (each tab's screen) in a parent one. How do we go about detecting where the scroll reached! (or something that notifies we are viewing contents of tab2 and so on...) Q2) How can I handle the animation of the tabs (especially the line under them as shown in the image) to transition back and forth? Q3) Is there a better way to do this! (better than my initial thoughts above)
Q1. You must use the
TabNavigator to avoid the problem as you asking in Q1. So you don’t need to worry about the Scroll.
Q2. I recommend using
StyleSheet, create a CSS style for line bar then maybe you just need to call a function to set the CSS of current tab or use the
TabNavigator is a good option here and it belongs to
— Update ——
I have created an example project for you to solve the problem, I’m not sure if you’re doing the same.
- Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
- To detect the Scroll reaches to end or not, I have used the isCloseToBottom from another StackOverflow answer.
Follow the following link to Github project.
- Database Administration Tutorials
- Programming Tutorials & IT News
- Linux & DevOps World
- Entertainment & General News
- Games & eSport