[Help]: Material Top Tabs Navigator Doesn't Work

[inthisar-hamza]

react-native environment setup

• [X] I verified that I have not react-native-cli installed globally and be up to date about the React Native environment setup.

Description

Material Top Tabs Navigator Doesn't Work or the active state doesn't switch when the tab changes. content swiches work but active state stays in one tab and never change when it's change.

and reproduce Steps: (in Redmi Note 12)

1st root navigator
const Stack = createNativeStackNavigator();
<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name="home" component={MainNavigator} />
  <Stack.Screen name="about" component={MainNavigator} />
</Stack.Navigator>

2nd nested one
const Tab = createBottomTabNavigator();
const MainNavigator = () => {

  return (
    <Tab.Navigator
    >
      <Tab.Screen
        name="screen1"
        component={Screen1}
      />
      <Tab.Screen
        name="screen2"
        component={Screen2}
      />
    </Tab.Navigator>
  );
};

3rd nested one (within Screen1/2)
const TopTab = createMaterialTopTabNavigator();

<TopTab.Navigator
  style={{
       borderWidth: 1,
     }}
  initialRouteName="Expenses"
>
          <TopTab.Screen name="Exp" component={Exe1} />
          <TopTab.Screen name="Cate" component={Cate1} />
          <TopTab.Screen name="Acc" component={Accounts} />
</TopTab.Navigator>

package.json

{
  "name": "Boilerplate",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "type-check": "tsc",
    "test:report": "jest --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --coverage",
    "pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install && cd .."
  },
  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/material-bottom-tabs": "^6.2.19",
    "@react-navigation/material-top-tabs": "^6.6.5",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "@reduxjs/toolkit": "^1.9.5",
    "i18next": "^23.2.3",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^13.0.1",
    "react-native": "0.72.1",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-mmkv": "^2.11.0",
    "react-native-pager-view": "^6.2.2",
    "react-native-paper": "^5.11.1",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
    "react-native-svg": "^13.14.0",
    "react-native-svg-transformer": "^1.1.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.0.2",
    "react-native-web": "^0.19.9",
    "react-redux": "^8.1.1",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.7",
    "@react-navigation/devtools": "^6.0.19",
    "@testing-library/jest-native": "^5.4.2",
    "@testing-library/react-native": "^12.1.2",
    "@tsconfig/react-native": "^3.0.0",
    "@types/jest": "^29.4.0",
    "@types/metro-config": "^0.76.3",
    "@types/node": "^18.14.1",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.72.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-inline-dotenv": "^1.7.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-root-import": "^6.6.0",
    "dotenv": "^16.3.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-native-flipper": "^0.202.0",
    "react-test-renderer": "18.2.0",
    "redux-flipper": "^2.0.2",
    "typescript": "5.2.2"
  },
  "engines": {
    "node": ">=16"
  }
}

Version

3.7.2

Do you use TypeScript?

• [X] Yes
• [ ] No

On which OS this issue appear on?

• [ ] IOS
• [X] Android

Desktop OS

Windows

[inthisar-hamza]

Anyone Can Check this?

[JeremyDolle]

You will need to clarify a little bit if you want help. You give us the code but not how to reproduce ? what is expected ?

[inthisar-hamza]

Is there are any reason the active state of Material Top Navigator doesn't switch, It just above code to run to reproduce

But I removed node_modules & re-installed then android gradlew clean command and rebuilt the app was fixed the issue for now.