Property 'Navigator' doesn't exist Error: React Native app

Question

Whenever I run my app through snack I keep getting this error: React Hook useEffect has an unnecessary dependency: Navigator. Either exclude it or remove the dependency array. Outer scope values like 'Navigator' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)

I tried looking on the web for fixes and tried reinstalling some packages but nothing would work.

The code related to the error is here:

export default function App() { 

  const [image, setImage] = useState(null);

  useEffect(() => {
      if (image != null){
    const formData = new FormData();
    formData.append('image', {
      uri: image,
      name: 'image.jpg',
      type: 'image/jpeg',
    });

    fetch('http://192.168.1.75:8000/classify', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        Navigator.navigate('Detail', { disease: data });
      })
      .catch((error) => {
        console.error(error);
      });

    
  }
  }, [image, Navigator])

I tried to reinstall packages but that didnt work. I tried running it through my phone but that didnt work either I tried deleting code bit by bit but would still result in the error

Answer 1

Hey:) The useEffect hook should only include dependencies that are used within the effect itself. The Navigator variable should not be included in the dependency array because it is a global object and changing it does not cause the component to be re-rendered.

To solve this problem, you can remove Navigator from the dependency array:

useEffect(() => {
    if (image != null) {
        const formData = new FormData();
        formData.append('image', {
            uri: image,
            name: 'image.jpg',
            type: 'image/jpeg',
    });

    fetch('http://192.168.1.75:8000/classify', {
        method: 'POST',
        body: formData,
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    })
   .then((response) => response.json())
   .then((data) => {
       Navigator.navigate('Detail', { disease: data });
   })
   .catch((error) => {
       console.error(error);
   });
 }
}, [image]);

In the HomeScreen function, instead of navigation={props.navigation} there should be navigation={navigation}.

Change "Navigator.navigate('Detail', { disease: data }) to navigation.navigate('Detail', { disease: data })".

In the "useEffect" function you are missing a dependency in the dependency array. Add "image" to this array.

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';
import { ListCustomItemShowcase } from './pages/Home';
import CameraIcon from './pages/components/Camera';
import Details from './pages/Details';
import * as ImagePicker from 'expo-image-picker';
import { createStackNavigator } from '@react-navigation/stack';
import DiseaseDetails from './pages/DiseaseDetails';
import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import { name as appName } from "./app.json";
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
  registerRootComponent(App);
} else {
  AppRegistry.registerComponent('main', () => App);
}

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <ListCustomItemShowcase navigation={navigation} />
    </View>
  );
}

function HomeContainer() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Home' component={HomeScreen} />
      <Stack.Screen name='Detail' component={DiseaseDetails} />
    </Stack.Navigator>
  );
}

export default function App() {
  const [image, setImage] = useState(null);

  useEffect(() => {
    if (image != null) {
      const formData = new FormData();
      formData.append('image', {
        uri: image,
        name: 'image.jpg',
        type: 'image/jpeg',
      });

      fetch('http://192.168.1.75:8000/classify', {
        method: 'POST',
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
        .then((response) => response.json())
        .then((data) => {
          navigation.navigate('Detail', { disease: data });
        })
        .catch((error) => {
          console.error(error);
        });
    }
  }, [image]);

  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <ApplicationProvider {...eva} theme={eva.light}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Disease') {
                iconName = focused
                  ? 'ios-information-circle'
                  : 'ios-information-circle-outline';
              } else if (route.name === 'Founders') {
                iconName = focused ? 'ios-list' : 'ios-list-outline';
              }

              return <Ionicons name={iconName} size={size} color={color} />;
            },
            tabBarActiveTintColor: '#337cbd',
            tabBarInactiveTintColor: 'gray',
          })}
        >
          <Tab.Screen name="Disease" component={HomeContainer} options={{ headerShown: false }} />
          <Tab.Screen name="Founders" component={Details} />
        </Tab.Navigator>
        <CameraIcon onPress={pickImage} />
      </NavigationContainer>
    </ApplicationProvider>
  );
}

Try updating @ui-kitten/components to the latest version that supports your version of React Native and Expo.

Updated answer: Judging by the logs, your project requires a version of @react-navigation/native at least 5.5.1, but it also requires a version of @react-navigation/native at least 6.0.0 for @react-navigation/stack. To resolve this conflict you need to update the @react-navigation/native version in your project to 6.x.x.

Enter the command in the terminal:

npm install @react-navigation/native@^6.0.0

And

npm i

To update all dependencies If an error appears like the one I had at first: "CommandError: It looks like you're trying to use web support but don't have the required dependencies installed.

Please install react-native-web@~0.19.6, [email protected] by running:

npx expo install react-native-web@~0.19.6 [email protected]

If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo config." Then install the dependencies to support the web platform:

npx expo install react-native-web@~0.19.6 [email protected]

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@eva-design/eva": "^2.1.1",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.5.3",
    "@react-navigation/core": "6.4.10",
    "@react-navigation/native": "^6.1.10",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.12",
    "@ui-kitten/components": "5.3.1",
    "expo": "~49.0.18",
    "expo-camera": "~13.4.4",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-media-library": "~15.4.1",
    "expo-permissions": "~14.2.1",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "10.0.3",
    "react-native-web": "~0.19.6",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}