Why unused default export error in React Native Expo project? - reactjs

Question

After installing React Navigation and command expo start:
1.) Simulators have blank white screens
2.) Web port has a blank white screen
3.) App.js now has unused default export
Troubleshooting:
1.) Uninstalled all React Navigation dependancies
2.) Reinstalled all React Navigation dependancies
App.js
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import StackNavigator from './Components/StackNavigator';
export default function App() {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}
StackNavigator.js
import React from 'react';
import 'react-native-gesture-handler';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeScreen from './HomeScreen';
import ResumeScreen from './ResumeScreen';
const StackNavigator = () => {
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Resume"
component={ResumeScreen}
/>
</Stack.Navigator>
</Drawer.Navigator>
);
};
export default StackNavigator;
package.json
{
"name": "portfolio",
"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"
},
"dependencies": {
"#expo/webpack-config": "^0.17.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.5.6",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.7",
"expo": "~47.0.8",
"expo-device": "~5.0.0",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-dom": "^18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "~2.8.0",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-svg": "13.4.0",
"react-native-web": "^0.18.10"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

Answer 1

You are trying to combine multiple forms of navigation incorrectly. Try just sticking with Drawer Navigation. Below is a simple working example.
App.js
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { NavigationContainer } from "#react-navigation/native";
import HomeScreen from "./screens/HomeScreen";
import ResumeScreen from "./screens/ResumeScreen";
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Resume" component={ResumeScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
package.json
{
"name": "example",
"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-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"expo": "~43.0.2",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
screens/HomeScreen.js
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const HomeScreen = () => {
return (
<View>
<Text>HomeScreen</Text>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({});
screens/ResumeScreen.js
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const ResumeScreen = () => {
return (
<View>
<Text>ResumeScreen</Text>
</View>
);
};
export default ResumeScreen;
const styles = StyleSheet.create({});