Expo app crashes on andriod emulator when using navigation stack

I just entered react native about a week ago and I just stumbled on this problem.

Every time I connect the navigation stack/drawer to my home app.js and then I run the expo app it shutdowns unexpectedly. Sometimes it shows an error but for less than a second then closes. But most times it never shows an error before closing.

I was able to capture an error but I’m not sure if it was the error that briefly shows. This was the error

unexpected identifier 'n'. Expected either in or if in enumeration syntax.

I have no idea where this error comes from.

My App.js

    import Home from './screens/Home';
// import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading'
import { useFonts } from 'expo-font';
import React,{ useState } from 'react';
import Navigator from './routes/HomeStack'

export default function App() {
  const [fontLoaded] = useFonts({
    'nunitoBold': require('./assets/fonts/Nunito-Bold.ttf'),
    'nunitoRegular': require('./assets/fonts/Nunito-Regular.ttf'),
  })
    // const [fontLoaded,setFontLoaded] = useState(false)

    if (!fontLoaded) {
      return (
        <AppLoading/>
      )
    }else{
      return (
        <Home/>
      )
    }
}

My HomeStack.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Details from "../screens/Details";
import Home from "../screens/Home";

const screens = {
    Home: {
        screen: Home,
    },
    ReviewDetails: {
        screen: Details,
    },
}

const HomeStack = createStackNavigator(screens, {
    defaultNavigationOptions: {
       headerStyle:{ backgroundColor: '#f00' },
       headerTintColor: '#444'
    }
})

export default createAppContainer(HomeStack);

My Home.js

import React, { useState } from 'react'
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home({ navigation }) {
  const [reviews, setReviews] = useState([
    { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
  ]);
  return (
    <View style={globalStyles.container}>
      <FlatList 
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

Also this worked yesterday perfectly. I just started receiving such errors just today and I hadn’t even touched my code.

My package.json

{
  "name": "gamezone",
  "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.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-font": "~10.0.4",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}