1import * as React from 'react';
2import { View, Text, Button } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createStackNavigator } from '@react-navigation/stack';
5
6function HomeScreen({ navigation }) {
7  return (
8    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
9      <Text>Home Screen</Text>
10      <Button
11        title="Go to Profile"
12        onPress={() =>
13          navigation.navigate('Profile', { name: 'Custom profile header' })
14        }
15      />
16    </View>
17  );
18}
19
20function ProfileScreen({ navigation }) {
21  return (
22    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
23      <Text>Profile screen</Text>
24      <Button title="Go back" onPress={() => navigation.goBack()} />
25    </View>
26  );
27}
28
29const Stack = createStackNavigator();
30
31function App() {
32  return (
33    <NavigationContainer>
34      <Stack.Navigator>
35        <Stack.Screen
36          name="Home"
37          component={HomeScreen}
38          options={{ title: 'My home' }}
39        />
40        <Stack.Screen
41          name="Profile"
42          component={ProfileScreen}
43          options={({ route }) => ({ title: route.params.name })}
44        />
45      </Stack.Navigator>
46    </NavigationContainer>
47  );
48}
49
50export default App;
51