callstack / callstack/react-native-pager-view
Buggy when nesting a top and bottom navigator within another top navigator for the TikTok style home tab with following/For you and profile pan gesture
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
## Ask your Question
How do I achieve the same navigation setup as Tiktok in terms of;
1. Bottom tab bar navigation.
2. Home tab displays a top tab bar navigation with "Following" and "For you"
3. Swiping left whilst on the final "For you" Tab navigates the user to the profile for the current focused video in the feed.
```
"@react-navigation/bottom-tabs": "^6.5.2",
"@react-navigation/core": "^6.4.5",
"@react-navigation/drawer": "^6.5.6",
"@react-navigation/material-bottom-tabs": "^6.2.10",
"@react-navigation/material-top-tabs": "^6.5.1",
"@react-navigation/native": "^6.1.1",
"@react-navigation/stack": "^6.3.10",
```
Here's a video showing what I mean.
https://user-images.githubusercontent.com/4559650/210152316-852b88e5-c5b3-4613-afaa-5c56a02992c1.mov
My current solution uses `createMaterialTopTabNavigator` with two screens one is `createMaterialBottomTabNavigator` and the other is `createStackNavigator` for the profile view. The home tab is its self another `createMaterialTopTabNavigator` for the following / for you section.
The user can swipe left / right to navigate between "Following" and "For you". But there when it comes to trying to navigate to the second top tab outside of the following/for you. I get some odd behaviour that I can't see to overcome.
1. If you swipe *quickly* to the left whilst on the final "For you" tab nothing happens. Expected it to pass my pan gesture to the other top tab navigator to allow me to get to the other profile view.
2. If you touch down on the screen then pause for about 500-1000ms then finally start swipe to the left the pan gesture is parsed to the other top tab navigator and it DOES allow me to get to the other profile view.
I tried to configure `swipableEnabled` but it can't handle this use case. I would need to know if the user is on the final tab and also know the swipe direction. If the user is on the final tab and swipes to the right they are going back to the following tab and hence the swipe should be allowed. But if they are swiping to the left then it doesn't shouldn't register the gesture so that the Tab bar/ profile top navigator can capture the gesture.
How's how mine looks.
https://user-images.githubusercontent.com/4559650/210152511-b0ce5e7f-7ee7-4365-b22e-8a783a8e9e40.mov
I can swipe over to the profile screen
1. if I press down, pause, then swipe left. As described above.
2. If I swipe from the top tab bar area
3. If I swipe from the bottom tab bar area
4. If I am on the first tab "Following and press down, pause then swipe it swipes to "For you" and also swipes into the profile page at the same time.
Here's a video of this strange bug in action.
https://user-images.githubusercontent.com/4559650/210152597-38de232b-9436-489b-8a1a-759d1ccdb17e.mov
Question:
Why does the press down wait then swipe work?
Is there a way to customise this time it takes to release the gesture from the top navigator so the other one can handle it?
Credits: started from this guys repo https://github.com/matheuscastroweb/tiktok-clone
Contributor guide
Assessment
This issue has not been assessed yet.