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

Aperta
#675 3 commenti 2 reazioni 0 assegnatari Vedi su GitHub
question
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.