Fix typos (#1366)

shubh73 · web-flow · commit f63a00271872 · 2026-01-09T15:18:13.000+01:00
diff --git a/static/examples/5.x/drawer-actions.js b/static/examples/5.x/drawer-actions.js
@@ -1,12 +1,11 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
-import { NavigationContainer, DrawerActions } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
-  DrawerItemList,
   DrawerItem,
+  DrawerItemList,
 } from '@react-navigation/drawer';
+import { DrawerActions, NavigationContainer } from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
@@ -34,7 +33,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/static/examples/5.x/hidden-components.js b/static/examples/5.x/hidden-components.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Text, View } from 'react-native';
 
 function Demo() {
   return (
@@ -23,8 +22,8 @@ export default function App() {
       <Stack.Navigator initialRouteName="Home" headerMode="none">
         <Stack.Screen name="Home">
           {() => (
-            <Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
-              <Tab.Screen name="Analitics" component={Demo} />
+            <Tab.Navigator initialRouteName="Analytics" tabBar={() => null}>
+              <Tab.Screen name="Analytics" component={Demo} />
               <Tab.Screen name="Profile" component={Demo} />
             </Tab.Navigator>
           )}
diff --git a/static/examples/5.x/safe-area-example.js b/static/examples/5.x/safe-area-example.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Text } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
 function Demo() {
@@ -26,8 +25,8 @@ export default function App() {
         <Stack.Navigator initialRouteName="Home" headerMode="none">
           <Stack.Screen name="Home">
             {() => (
-              <Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
-                <Tab.Screen name="Analitics" component={Demo} />
+              <Tab.Navigator initialRouteName="Analytics" tabBar={() => null}>
+                <Tab.Screen name="Analytics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />
               </Tab.Navigator>
             )}
diff --git a/static/examples/5.x/state-persistence.js b/static/examples/5.x/state-persistence.js
diff --git a/static/examples/5.x/tab-actions.js b/static/examples/5.x/tab-actions.js
@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
-import { NavigationContainer, TabActions } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer, TabActions } from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
@@ -21,7 +20,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/static/examples/5.x/use-safe-area.js b/static/examples/5.x/use-safe-area.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Text, View } from 'react-native';
 import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context';
 
 function Demo() {
@@ -34,8 +33,8 @@ export default function App() {
         <Stack.Navigator initialRouteName="Home" headerMode="none">
           <Stack.Screen name="Home">
             {() => (
-              <Tab.Navigator initialRouteName="Analitics" tabBar={() => null}>
-                <Tab.Screen name="Analitics" component={Demo} />
+              <Tab.Navigator initialRouteName="Analytics" tabBar={() => null}>
+                <Tab.Screen name="Analytics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />
               </Tab.Navigator>
             )}
diff --git a/static/examples/6.x/drawer-actions.js b/static/examples/6.x/drawer-actions.js
@@ -1,12 +1,11 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
-import { NavigationContainer, DrawerActions } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
-  DrawerItemList,
   DrawerItem,
+  DrawerItemList,
 } from '@react-navigation/drawer';
+import { DrawerActions, NavigationContainer } from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
@@ -34,7 +33,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/static/examples/6.x/hidden-components.js b/static/examples/6.x/hidden-components.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Text, View } from 'react-native';
 
 function Demo() {
   return (
@@ -27,11 +26,11 @@ export default function App() {
         <Stack.Screen name="Home">
           {() => (
             <Tab.Navigator
-              initialRouteName="Analitics"
+              initialRouteName="Analytics"
               tabBar={() => null}
               screenOptions={{ headerShown: false }}
             >
-              <Tab.Screen name="Analitics" component={Demo} />
+              <Tab.Screen name="Analytics" component={Demo} />
               <Tab.Screen name="Profile" component={Demo} />
             </Tab.Navigator>
           )}
diff --git a/static/examples/6.x/safe-area-example.js b/static/examples/6.x/safe-area-example.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { View, Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Text, View } from 'react-native';
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
@@ -43,11 +42,11 @@ export default function App() {
           <Stack.Screen name="Home">
             {() => (
               <Tab.Navigator
-                initialRouteName="Analitics"
+                initialRouteName="Analytics"
                 tabBar={() => null}
                 screenOptions={{ headerShown: false }}
               >
-                <Tab.Screen name="Analitics" component={Demo} />
+                <Tab.Screen name="Analytics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />
               </Tab.Navigator>
             )}
diff --git a/static/examples/6.x/state-persistence.js b/static/examples/6.x/state-persistence.js
diff --git a/static/examples/6.x/tab-actions.js b/static/examples/6.x/tab-actions.js
@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { View, Button, Text } from 'react-native';
-import { NavigationContainer, TabActions } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer, TabActions } from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
 
 function HomeScreen({ navigation }) {
   const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
@@ -21,7 +20,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/static/examples/6.x/use-safe-area.js b/static/examples/6.x/use-safe-area.js
@@ -1,8 +1,7 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Text, View } from 'react-native';
 import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context';
 
 function Demo() {
@@ -38,11 +37,11 @@ export default function App() {
           <Stack.Screen name="Home">
             {() => (
               <Tab.Navigator
-                initialRouteName="Analitics"
+                initialRouteName="Analytics"
                 tabBar={() => null}
                 screenOptions={{ headerShown: false }}
               >
-                <Tab.Screen name="Analitics" component={Demo} />
+                <Tab.Screen name="Analytics" component={Demo} />
                 <Tab.Screen name="Profile" component={Demo} />
               </Tab.Navigator>
             )}
diff --git a/versioned_docs/version-5.x/state-persistence.md b/versioned_docs/version-5.x/state-persistence.md
@@ -17,7 +17,7 @@ To be able to persist the [navigation state](navigation-state.md), we can use th
 - `onStateChange` - This prop notifies us of any state changes. We can persist the state in this callback.
 - `initialState` - This prop allows us to pass an initial state to use for [navigation state](navigation-state.md). We can pass the restored state in this prop.
 
- <samp id="state-persistance" />
+ <samp id="state-persistence" />
 
 ```js
 import * as React from 'react';
diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md
@@ -441,7 +441,7 @@ Supported values:
 - `"none"`
 - `"slide"`
 
-On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
+On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to the appereance animation of the status bar.
 
 Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
 
diff --git a/versioned_docs/version-6.x/state-persistence.md b/versioned_docs/version-6.x/state-persistence.md
@@ -15,7 +15,7 @@ To be able to persist the [navigation state](navigation-state.md), we can use th
 - `onStateChange` - This prop notifies us of any state changes. We can persist the state in this callback.
 - `initialState` - This prop allows us to pass an initial state to use for [navigation state](navigation-state.md). We can pass the restored state in this prop.
 
-<samp id="state-persistance" />
+<samp id="state-persistence" />
 
 ```js
 import * as React from 'react';
diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md
@@ -230,7 +230,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md
@@ -109,7 +109,7 @@ Supported values:
 - `"none"`
 - `"slide"`
 
-On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
+On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to the appereance animation of the status bar.
 
 Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
 
diff --git a/versioned_docs/version-7.x/screen-tracking.md b/versioned_docs/version-7.x/screen-tracking.md
@@ -101,7 +101,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Screen tracking for anylytics" snack
+```js name="Screen tracking for analytics" snack
 import * as React from 'react';
 import { View } from 'react-native';
 // codeblock-focus-start
diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md
@@ -55,7 +55,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/versioned_docs/version-8.x/drawer-actions.md b/versioned_docs/version-8.x/drawer-actions.md
@@ -230,7 +230,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
diff --git a/versioned_docs/version-8.x/native-stack-navigator.md b/versioned_docs/version-8.x/native-stack-navigator.md
@@ -109,7 +109,7 @@ Supported values:
 - `"none"`
 - `"slide"`
 
-On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
+On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to the appereance animation of the status bar.
 
 Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
 
diff --git a/versioned_docs/version-8.x/screen-tracking.md b/versioned_docs/version-8.x/screen-tracking.md
@@ -76,6 +76,9 @@ export default function App() {
       ref={navigationRef}
       onReady={() => {
         routeNameRef.current = navigationRef.current.getCurrentRoute().name;
+
+        // Replace the line below to add the tracker from a mobile analytics SDK
+        await trackScreenView(currentRouteName);
       }}
       onStateChange={async () => {
         const previousRouteName = routeNameRef.current;
@@ -101,7 +104,7 @@ export default function App() {
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Screen tracking for anylytics" snack
+```js name="Screen tracking for analytics" snack
 import * as React from 'react';
 import { View } from 'react-native';
 // codeblock-focus-start
diff --git a/versioned_docs/version-8.x/tab-actions.md b/versioned_docs/version-8.x/tab-actions.md
@@ -55,7 +55,9 @@ function ProfileScreen({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile!</Text>
-      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+      <Text>
+        {route?.params?.user ? route.params.user : 'No one'}'s profile
+      </Text>
     </View>
   );
 }
