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
- Lingua principale
- TypeScript
- Stelle
- 3.4k
- Fork
- 476
- Merge medio
- 10g 21h
- PR unite (30g)
- 2
Descrizione
## 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Riproduci la configurazione del navigator annidato usando createMaterialTopTabNavigator, createMaterialBottomTabNavigator e createStackNavigator, seguendo i video collegati e le versioni di React Navigation elencate. Inizia tracciando il modo in cui il navigator superiore gestisce gli swipe nell’ultima scheda "For you" e il modo in cui il navigator del profilo riceve i gesti. Il lavoro è completo quando uno swipe rapido verso sinistra raggiunge la vista del profilo senza la pausa, mentre gli swipe verso sinistra e destra tra "Following" e "For you" continuano a comportarsi correttamente.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react-native, typescript
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 20/100