Stack Navigation in React Native with Typescript

App.tsx

import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";

export type RootStackParamList = {
  Home: undefined;
  Settings: undefined;
  Profile: undefined;
};

type HomeScreenProps = NativeStackScreenProps<RootStackParamList, "Home">;

const HomeScreen: React.FC<HomeScreenProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title='Go to Profile' onPress={() => props.navigation.push("Profile")} />
      <Button title='Go to Settings' onPress={() => props.navigation.push("Settings")} />
    </View>
  );
};

type SettingsScreenProps = NativeStackScreenProps<RootStackParamList, "Settings">;

const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Settings Screen</Text>
      <Button title='Go to Profile' onPress={() => props.navigation.push("Profile")} />
    </View>
  );
};

type ProfileScreenProps = NativeStackScreenProps<RootStackParamList, "Settings">;

const ProfileScreen: React.FC<ProfileScreenProps> = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Profile Screen</Text>
      <Button title='Go to Settings' onPress={() => props.navigation.push("Settings")} />
    </View>
  );
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Profile' component={ProfileScreen} />
        <Stack.Screen name='Settings' component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

In your example you did not show how to pass parameters to a new screen through the RootStackParamList.

export type RootStackParamList = {
  Home: undefined;
  Settings: undefined;
  Profile: undefined;
};

`import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack";

export type RootStackParamList = {
Home: undefined;
Settings: undefined;
Profile: { userId: string }; // Define the type of userId prop for Profile screen
};

type HomeScreenProps = NativeStackScreenProps<RootStackParamList, "Home">;

const HomeScreen: React.FC = (props) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button title='Go to Profile' onPress={() => props.navigation.push("Profile", { userId: "123" })} />
<Button title='Go to Settings' onPress={() => props.navigation.push("Settings")} />

);
};

type SettingsScreenProps = NativeStackScreenProps<RootStackParamList, "Settings">;

const SettingsScreen: React.FC = (props) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
Settings Screen
<Button title='Go to Profile' onPress={() => props.navigation.push("Profile", { userId: "456" })} />

);
};

type ProfileScreenProps = NativeStackScreenProps<RootStackParamList, "Profile">;

const ProfileScreen: React.FC = (props) => {
const userId = props.route.params?.userId || "No User Id"; // Access the passed userId prop
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
Profile Screen
User ID: {userId}
<Button title='Go to Settings' onPress={() => props.navigation.push("Settings")} />

);
};

const Stack = createNativeStackNavigator();

function App() {
return (

<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Profile' component={ProfileScreen} />
<Stack.Screen name='Settings' component={SettingsScreen} />
</Stack.Navigator>

);
}

export default App;
`