diff --git a/docs/navigation.md b/docs/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/docs/navigation.md
+++ b/docs/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.80/navigation.md b/website/versioned_docs/version-0.80/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.80/navigation.md
+++ b/website/versioned_docs/version-0.80/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.81/navigation.md b/website/versioned_docs/version-0.81/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.81/navigation.md
+++ b/website/versioned_docs/version-0.81/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.82/navigation.md b/website/versioned_docs/version-0.82/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.82/navigation.md
+++ b/website/versioned_docs/version-0.82/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.83/navigation.md b/website/versioned_docs/version-0.83/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.83/navigation.md
+++ b/website/versioned_docs/version-0.83/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.84/navigation.md b/website/versioned_docs/version-0.84/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.84/navigation.md
+++ b/website/versioned_docs/version-0.84/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.85/navigation.md b/website/versioned_docs/version-0.85/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.85/navigation.md
+++ b/website/versioned_docs/version-0.85/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```
diff --git a/website/versioned_docs/version-0.86/navigation.md b/website/versioned_docs/version-0.86/navigation.md
index 4d9586bf801..b02ac0e472a 100644
--- a/website/versioned_docs/version-0.86/navigation.md
+++ b/website/versioned_docs/version-0.86/navigation.md
@@ -63,7 +63,7 @@ Now you are ready to build and run your app on the device/simulator.
 
 Now you can create an app with a home screen and a profile screen:
 
-```tsx
+```tsx title="App.tsx"
 import {createStaticNavigation} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
@@ -92,10 +92,10 @@ You can specify options such as the screen title for each screen in the `options
 
 Inside each screen component, you can use the `useNavigation` hook to get the `navigation` object, which has various methods to link to other screens. For example, you can use `navigation.navigate` to go to the `Profile` screen:
 
-```tsx
+```tsx title="HomeScreen.tsx"
 import {useNavigation} from '@react-navigation/native';
 
-function HomeScreen() {
+export default function HomeScreen() {
   const navigation = useNavigation();
 
   return (
@@ -107,8 +107,10 @@ function HomeScreen() {
     />
   );
 }
+```
 
-function ProfileScreen({route}) {
+```tsx title="ProfileScreen.tsx"
+export default function ProfileScreen({route}) {
   return <Text>This is {route.params.name}'s profile</Text>;
 }
 ```