Whenever I am moving to different tab screens it shows the error "Accessing the state property of the route object is not supported"

user_13899155 0
Viewed 803

I am making a food delivery app whenever I am switching to different screens in tab bar it shows the error

Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead:

The error says me to go the following link react-navigation

Here is the code of my MainTabScreen which contains the tab navigator

const Tab = createBottomTabNavigator();

const tabOptions = {
  activeTintColor: "red",
  inactiveTintColor: "black",

  showLabel: false,
};
const MainTabScreen = () => {

  return (
    <Tab.Navigator tabOptions={tabOptions}>
      <Tab.Screen
        name="MainHome"
        component={MainHomeScreen}
        options={{
          tabBarIcon: () => (
             <Icon.Home color={color} height={28} width={28} />
          ),
        }}
      />
      <Tab.Screen
        name="MainCart"
        component={MainCartScreen}
        options={{
          tabBarIcon: () => (
            <Icon.ShoppingCart color={color} width={28} height={28} />
          ),
        }}
      />
      <Tab.Screen
        name="MainProfile"
        component={MainProfileScreen}
        options={{
          tabBarIcon: () => (
             <Icon.User color={color} height={28} width={28} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MainTabScreen;

My MainHomeScreen, MainCartScreen and MainProfileScreen looks similar to this

const Stack = createStackNavigator();
const MainProfileScreen = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
    </Stack.Navigator>
  );
};

export default MainProfileScreen;

My package versions:

    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "@twotalltotems/react-native-otp-input": "^1.3.5",
    "dayjs": "^1.10.6",
    "expo": "~42.0.1",
    "expo-firebase-recaptcha": "^1.4.2",
    "expo-font": "~9.2.1",
    "expo-location": "~12.1.2",
    "expo-notifications": "~0.12.3",
    "expo-secure-store": "~10.2.0",
    "expo-status-bar": "~1.0.4",
    "firebase": "^8.2.3",
    "lottie-react-native": "4.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-feather": "^1.1.2",
    "react-native-form-select-picker": "^0.0.12",
    "react-native-input-spinner": "^1.7.11",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2",
    "react-redux": "^7.2.5",
    "recyclerlistview": "^3.0.5",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1"
react-navigation-bottom-tab react-navigation-v5 react-native reactjs javascript
3 Answers

i am using the same logic and this way of implementation works fine for me,

I am using react-navigation-v5

Give it a shot, Cheers

I MainScreen index.tsx I have the tab navigator

      <Tab.Navigator
    sceneContainerStyle={{ backgroundColor: Theme.colors.white }}
    initialRouteName="Profile"
    screenOptions={({ route }) => ({
      tabBarIcon: ({ color, size }) => {

        if (route.name === 'Profile') {
          return <AntDesign name="profile" size={size} color={color} />
        }
        if (route.name === 'Settings') {
          return <FontAwesome5 name="settings" size={size} color={color} />
        }
      },
    })}
    tabBarOptions={{
      activeTintColor: Theme.colors.blue,
      inactiveTintColor: Theme.colors.greyShade2
    }}
  >
    <Tab.Screen name="Profile" component={ProfileScreen} />
    <Tab.Screen name="Profile" component={SettingsScreen} />

  </Tab.Navigator>

and on your Main Profile screen in Stack.screen call it like this. This is how I called my MainScreen(where i have Tab navigator) in Stack

          <Stack.Screen
        name="MainScreen"
        options={({ route, navigation }) => {
          const focusedRoute = getFocusedRouteNameFromRoute(route) || 'Profile'
          return {
            cardStyle: { backgroundColor: Theme.colors.white },
            title: focusedRoute,
            headerTitleAlign: 'left',
            headerStyle: {
              height: Platform.OS === 'ios' ? Constants.statusBarHeight + 68 : 68
            },
            headerTitle: () => {
              if (focusedRoute === 'Profile') {
                return (
                  <Div row alignItems='center'>
                    <YourLogo />
                    <Text>Your header title</Text>
                  </Div>
                )
              }
              return <Text ml="lg" fontFamily="Gilroy-ExtraBold" fontSize={18}>{focusedRoute}</Text>
            },
            headerRight: () => {
              if (focusedRoute === 'Profile') {
                return (
                  <Div mr="lg">
                    <TouchableOpacity style={{ padding: 10 }} onPress={() => navigation.navigate('SettingsScreen')}>
                      <SettingsIcon />
                    </TouchableOpacity>
                  </Div>
                )
              }
              return null
            }
          }
        }}
        component={MainScreen} />

hope this helps. explore and customize your nav to your hearts content. Good luck, Cheers

user_169927700
user_43735830

The error was because of the package why-did-you-render after commenting it from the imports the error goes away. Thanks everyone for the help and support.

user_138991550
Related