From 4e63eba7d4a777520801bc1f67134bd0e327d46e Mon Sep 17 00:00:00 2001
From: Tapha Ngum <tapha@live.co.uk>
Date: Sun, 5 Mar 2023 14:49:54 +0000
Subject: [PATCH] Update navigation.md

Clearer context for Screen examples.
---
 docs/navigation.md | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/docs/navigation.md b/docs/navigation.md
index 101acb85779..ab4b6f797c2 100644
--- a/docs/navigation.md
+++ b/docs/navigation.md
@@ -100,19 +100,30 @@ You can set options such as the screen title for each screen in the `options` pr
 Each screen takes a `component` prop that is a React component. Those components receive a prop called `navigation` which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
 ```tsx
+import { Button } from "react-native";
+
 const HomeScreen = ({navigation}) => {
-  return (
-    <Button
-      title="Go to Jane's profile"
-      onPress={() =>
-        navigation.navigate('Profile', {name: 'Jane'})
-      }
-    />
-  );
+    return (
+      <Button
+        title="Go to Jane's profile"
+        onPress={() =>
+          navigation.navigate('Profile', {name: 'Jane'})
+        }
+      />
+    );
 };
-const ProfileScreen = ({navigation, route}) => {
+
+export default HomeScreen;
+```
+
+```tsx
+import { Text } from "react-native";
+
+const ProfileScreen = ({ navigation, route }) => {
   return <Text>This is {route.params.name}'s profile</Text>;
 };
+
+export default ProfileScreen;
 ```
 
 This `native-stack` navigator uses the native APIs: `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createNativeStackNavigator` will behave the same and have the same performance characteristics as apps built natively on top of those APIs.