Currently, I am in the process of developing a new React Native Expo project utilizing TypeScript. I have been attempting to configure navigation following the guidance provided in React Native's TypeScript documentation. However, upon running and simulating the application, nothing is appearing on the screen.
Below, you can find the simplistic boilerplate code that I am working with:
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import { RootStackParamList } from "./types";
import HomeScreen from "./screens/HomeScreen";
import { NavigationContainer } from "@react-navigation/native";
const RootStack = createStackNavigator<RootStackParamList>();
export default function App() {
return (
<NavigationContainer>
<RootStack.Navigator initialRouteName="Home">
<RootStack.Screen name="Home" component={HomeScreen} />
</RootStack.Navigator>
</NavigationContainer>
);
}
The defined RootStackParamList for this project is as follows:
export type RootStackParamList = {
Home: undefined;
ReactQuiz: undefined;
};
This piece of code pertains to the homepage structure:
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const HomeScreen = () => {
return (
<View style={styles.container}>
<Text>HomeScreen</Text>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
Lastly, here is an excerpt from my package.json file where I suspect the issue may lie:
{
"name": "trivia",
"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": {
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@react-navigation/stack": "^6.3.17",
"expo": "~49.0.7",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.2.14",
"typescript": "^5.1.3"
},
"private": true
}
The compiler has flagged a potential issue related to multiple navigation dependencies being installed. However, I have followed the documentation recommendations closely. The implementation of NavigationContainer is necessary to avoid errors, and both additional dependencies are required for TypeScript functionality.
If any mistakes or oversights are present in my approach, please feel free to provide feedback.