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

[gruckion]

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.

RPReplay_Final1672509687.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.

RPReplay_Final1672510446.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.

RPReplay_Final1672511209.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

[ilyadynin]

Does Material Top Tabs conflict with PagerView? I somehow cannot get it to work with PagerView, but for horizontal scrolling, when I am on the first index in PagerView and want to swipe left to the left screen it blocks

[Moritz-Friedemann]

PagerView in a Bottom Tabs Navigator screen is not displayed for some reason while it works outside of the Navigator. Has anyone found a solution to this or an alternative to using PagerView ?

[ilyadynin]

@Moritz-Friedemann maybe try portals