React-Native: React could not be found within project or in these directories: node Modules

Question

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'