Good day,
I am currently working on a react native app project. I am trying to create a simple example to better understand how the navigation works, but I am having trouble replicating the example provided in the documentation.
Below is an image showing the output of my attempted simulation:
This is the code snippet that I have experimented with:
import React from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
import Index from './components/IndexView';
type RootStackParamList = {
Home: undefined;
Profile: { name: string };
};
type HomeScreenProps = {
navigation: NativeStackNavigationProp<RootStackParamList, 'Home'>;
};
const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
return (
<Button
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
/>
);
};
type ProfileScreenProps = {
navigation: NativeStackNavigationProp<RootStackParamList, 'Profile'>;
route: { params: { name: string } };
};
const ProfileScreen: React.FC<ProfileScreenProps> = ({ route }) => {
return <Text>This is {route.params.name}'s profile</Text>;
};
const MemoizedProfileScreen = React.memo(ProfileScreen); // Wrap ProfileScreen with React.memo
const Stack = createNativeStackNavigator<RootStackParamList>();
function App(): JSX.Element {
return (
<NavigationContainer>
<SafeAreaView>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
/>
<Stack.Screen
name="Profile"
component={MemoizedProfileScreen} // Use MemoizedProfileScreen here
/>
</Stack.Navigator>
</SafeAreaView>
</NavigationContainer>
);
}
export default App;