0

Having a problem with React-Native and Expo Go. I have an error on my phone (Expo Go). I'm currently following this tutorial: https://www.youtube.com/watch?v=_ivIUCSOZ78&ab_channel=JavaScriptMastery .

Expo Go Error.

Unable to resolve module @react-navigation/stack from C:\Users\chsal\OneDrive\Desktop\react_native_app\App.js: @react-navigation/stack could not be found within the project or in these directories:
  node_modules
> 1 | import { createStackNavigator } from "@react-navigation/stack";
    |                                       ^
  2 | import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
  3 | import { useFonts } from 'expo-font'; 
  4 |

ABI47_0_0RCTFatal
ABI47_0_0RCTConvertArrayValue
24DB930D-870B-31CE-AC69-534D7896B4A8
24DB930D-870B-31CE-AC69-534D7896B4A8
24DB930D-870B-31CE-AC69-534D7896B4A8
_dispatch_main_queue_callback_4CF
725E49F4-653B-39BF-9A7A-8A3250911ECB
725E49F4-653B-39BF-9A7A-8A3250911ECB
CFRunLoopRunSpecific
GSEventRunModal
59CBC9B5-30AE-396E-A269-A986640001BC
UIApplicationMain
main
7B63C573-6161-3B33-A3A2-9944BA59722F

And here is my App.Js

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { useFonts } from 'expo-font'; 

import Home from './Screens/Home'
import Details from './Screens/Details'

const Stack = createStackNavigator();

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: "transparent"
  }
}

const App = () => {
  const [loaded] = useFonts({


  });
  return (
    <NavigationContainer theme={theme}>
      <Stack.Navigator screenOptions={{ headerShown: false }}initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

And my Package.Json which contains my dependencies.

"name": "pronef",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "expo": "~44.0.0",
    "expo-font": "^10.0.5",
    "expo-updates": "~0.11.6",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I have been reading on other people's posts but can't find anything overly similar I've tried:

  • changing React = react
  • copying from dependencies
  • going from "x" to 'x'
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Cole Harris
  • 1
  • First rename App.js to App.jsx and add import in App.jsx ```import React from “react”``` In the the case it doesn’t, often it helps to clear the ```node_modules``` folder – Michael Bahl Jan 20 '23 at 02:01
  • i have added the import React from "react" but i am still gettingthe error how can i clear modules? – Cole Harris Jan 20 '23 at 20:55
  • Try following: ```npm start -- --reset-cache ``` and ```watchman watch-del-all``` and ```rm -rf node modules``` and ```npm install``` Your App.js contain jsx it has to be an jsx sufix instead if js – Michael Bahl Jan 21 '23 at 14:06

0 Answers0