@react-navigation/material-top-tabs not working on tab android expo

1.5k views Asked by At

I have upgraded my expo version to version 47.0.9 I came from expo 45 so it was a pretty big upgrade.

It's all working fine except for one thing. The material top tabs for react native don't work on tab but they work if i scroll. On IOS it is working fine but on android it doesn't

i have recorded a little video of me showing it: https://youtu.be/XtZMZ-IzDxs

So i have tried to change some properties in de tabs etc. but nothing seems to be working

Here is my code

<Tab.Navigator initialRouteName="Overview" navigation={navigation}
        tabBarOptions={{
          labelStyle: { fontSize: 15, fontFamily: 'Inter_700Bold', textTransform: 'none' },
          indicatorStyle: { backgroundColor: 'black', height: 2 }
        }}
        screenOptions={({route}) => ({
          headerShown: false
        })}
      >
        <Tab.Screen name="Leerdoelen">{props => <Overview isHybrid={isHybrid} moduleScore={moduleScore} moduleUsers={moduleUsers} data={data} userData={userData} colorBox={colorBox} accentColor={accentColor} navigation={navigation}/>}</Tab.Screen>
        <Tab.Screen name="Onderwijs">{props => <Curriculum listOfBibleschoolHybridUserIn={listOfBibleschoolHybridUserIn} isHybrid={isHybrid} data={data} userData={userData} colorBox={colorBox} accentColor={accentColor} navigation={navigation}/>}</Tab.Screen> 
        {isHybrid !== true &&
          <Tab.Screen name="Overig">{props => <Teachers data={data} teacherData={teacherData} colorBox={colorBox} accentColor={accentColor} userData={userData} navigation={navigation}/>}</Tab.Screen>
        }
        {isHybrid === true &&
          <Tab.Screen name="Opdrachten">{props => <Assignments data={data} teacherData={teacherData} colorBox={colorBox} accentColor={accentColor} userData={userData} navigation={navigation}/>}</Tab.Screen>
        }
      </Tab.Navigator>

all my import are good and on IOS everything works fine.

Someone has a solution?

2

There are 2 answers

0
Sander van Maastricht On BEST ANSWER

So it's very simple.

You need to install this package:

npx expo install react-native-pager-view
0
bondythegreat On
-    "react-native-pager-view": "^6.1.2",
+    "react-native-pager-view": "6.0.1",

i was in 6.1.2 with same issue on android, and downgrade to 6.0.1 fix the problem. it's working now