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
- Lenguaje dominante
- TypeScript
- Estrellas
- 3.4k
- Forks
- 476
- Merge medio
- 10 d 21 h
- PR fusionados (30 d)
- 2
Descripción
## 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
Guía de contribución
Línea de trabajo
Reproduce la configuración del navegador anidado usando createMaterialTopTabNavigator, createMaterialBottomTabNavigator y createStackNavigator, siguiendo los vídeos enlazados y las versiones de React Navigation indicadas. Empieza rastreando cómo el navegador superior gestiona los deslizamientos en la pestaña final "For you" y cómo el navegador del perfil recibe los gestos. Se considera terminado cuando un deslizamiento rápido hacia la izquierda llega a la vista del perfil sin la pausa, mientras que los deslizamientos hacia la izquierda y la derecha entre "Following" y "For you" siguen comportándose correctamente.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 20/100