ReferenceError: Can't find variable: useState - React Native - react-native

Question

I have been developing a sample mobile application from React native and I keep getting the following error but I cannot seems to put my finger on what's wrong there. The line does not show any errors and the details in the log do not indicate anything that I should be concern about either. But I keep getting this error.
ReferenceError: Can't find variable: useState
This error is located at:
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in DevAppContainer (at AppContainer.js:121)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
My App.js looks as follows
import "react-native-gesture-handler";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import React, { useState } from "react";
import useFonts from "./hooks/useFonts";
import TravelPartner from "./src/components/mainPage";
const App = () => {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return (
<View styles={styles.container}>
{<Text>test run for the application</Text>}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default App;
All the libraries have been installed and everything Is up to date. useFonts.js looks as follows
import * as Font from "expo-font";
export default useFonts = async () => {
await Font.loadAsync({
"OtomanopeeOne-Regular": require("../src/assets/fonts/OtomanopeeOne-Regular.ttf"),
"VeganStylePersonalUse-5Y58": require("../src/assets/fonts/VeganStylePersonalUse-5Y58.ttf"),
"Festive-Regular": require("../src/assets/fonts/Festive-Regular.ttf"),
"Pacifico-Regular": require("../src/assets/fonts/Pacifico-Regular.ttf"),
});
};
This is my package.json:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"#react-navigation/native": "^6.0.1",
"#react-navigation/stack": "^6.0.1",
"expo": "~42.0.1",
"expo-app-loading": "^1.1.2",
"expo-font": "~9.2.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-screens": "~3.4.0",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}

Answer 1

The problem is in your React version. You are using "react": "16.13.1" but hooks are introduced in 16.8 version. Update your React version will solve the problem.
Please run:
npm install react#latest react-dom#latest

Answer 2

try to remove node_modules directory and package-lock.json and then run npm install