4

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"
Ayush Kumar
  • 494
  • 1
  • 6
  • 21
  • please add more code, try to add the screen code which has the error – Ahmed Gaber Sep 23 '21 at 17:45
  • Could you provide us with the version of the packages you are using? E.g. `@react-navigation/native` `@react-navigation/stack` and so on? – Elias Sep 23 '21 at 19:42
  • Btw. your link redirects me to `about:blank#blocked` – Elias Sep 23 '21 at 19:55
  • I'm not really sure why this is happening, could you create a reproducible example on something like https://snack.expo.dev/. – Elias Sep 24 '21 at 14:17

3 Answers3

1

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

Cva
  • 116
  • 1
  • 6
  • How do I implement ```headerShown: false```? – Ayush Kumar Sep 29 '21 at 13:10
  • I do something like this inside the Stack.Screen `options={({ route }) => { const routeName = getFocusedRouteNameFromRoute(route) switch (routeName) { case 'LandingScreen': return ({ swipeEnabled: false, headerShown: false }) case 'LoginScreen': return ({ swipeEnabled: false, headerShown: false }) default: return ({ headerShown: false }) }` – Cva Sep 29 '21 at 14:58
0

Simplest solution is to remove the prop { route } and replace with the hook useRoute

https://reactnavigation.org/docs/use-route/

Adam Katz
  • 6,999
  • 11
  • 42
  • 74
0

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.

Ayush Kumar
  • 494
  • 1
  • 6
  • 21