createMaterialTopTabNavigator doesn't navigate after one navigation

Question

When I use createBottomTabNavigator for my app, it works perfect on both iOS and Android. But when I change it to createMaterialTopTabNavigator, it stops navigating after one click on tabs on Android (iPhone simulator works fine). I can still swipe left and right to different tabs, but the tab bar doesn't redirect anymore. The app doesn't freeze, it responds well, but redirection doesn't happen. And if I change it to createBottomTabNavigator, it works perfectly fine again. What might be the problem? I tested it on a real Android device, still the same. There's no tabBar options or anything else. The most strange thing is that swipe still works.

const JournalStack = createStackNavigator({
    Journal: JournalScreen,
    ActivityDetail: ActivityDetailsScreen,
})

const HomeStack = createStackNavigator({
    Home: HomeScreen,
})

const TasksStack = createStackNavigator({
    Tasks: TasksScreen,
})

export const MainTabs = createMaterialTopTabNavigator({
    Journal: JournalStack,
    Home: HomeStack,
    Tasks: TasksStack,
})

Here's a small video demonstrating the problem https://i.imgur.com/34gPrIJ.mp4

Answer 1

This is a known issue https://github.com/react-navigation/react-navigation/issues/5684 , it can be fixed using the steps in that issue, or using the latest version (alpha) of react navigation tabs https://github.com/react-navigation/react-navigation-tabs/releases/tag/v2.0.0-alpha.0 . However, you would need to add reanimated as a dependency , but it's a must have library for really performant animations and fixes performance on older devices