react_navigation_native_stack_with_typescript_props.ts

1import * as React from 'react';
2import { View, Text, Button } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
5
6// Define the types for your stack navigator routes
7type RootStackParamList = {
8  Home: undefined;
9  Details: { itemId: number; otherParam?: string };
10};
11
12// Define types for the screen props
13type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
14type DetailsProps = NativeStackScreenProps<RootStackParamList, 'Details'>;
15
16function HomeScreen({ navigation }: HomeProps) {
17  return (
18    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
19      <Text>Home Screen</Text>
20      <Button
21        title="Go to Details"
22        onPress={() => navigation.navigate('Details', {
23          itemId: 86,
24          otherParam: 'anything you want here',
25        })}
26      />
27    </View>
28  );
29}
30
31function DetailsScreen({ route, navigation }: DetailsProps) {
32  const { itemId, otherParam } = route.params;
33  return (
34    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
35      <Text>Details Screen</Text>
36      <Text>itemId: {JSON.stringify(itemId)}</Text>
37      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
38      <Button title="Go back" onPress={() => navigation.goBack()} />
39    </View>
40  );
41}
42
43const Stack = createNativeStackNavigator<RootStackParamList>();
44
45function App() {
46  return (
47    <NavigationContainer>
48      <Stack.Navigator initialRouteName="Home">
49        <Stack.Screen 
50          name="Home" 
51          component={HomeScreen} 
52          options={{ title: 'Overview' }} 
53        />
54        <Stack.Screen name="Details" component={DetailsScreen} />
55      </Stack.Navigator>
56    </NavigationContainer>
57  );
58}
59
60export default App;