React Native: Creating custom tabs with animation


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)


Answer 1:

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 navigation options.

Q3. TabNavigator is a good option here and it belongs to react-navigation.


Animation example with custom function

— Update ——
I have created an example project for you to solve the problem, I’m not sure if you’re doing the same.

  1. Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
  2. 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.