diff --git a/static/examples/5.x/drawer-actions.js b/static/examples/5.x/drawer-actions.js index 2576b6812f8..90120107e4f 100755 --- a/static/examples/5.x/drawer-actions.js +++ b/static/examples/5.x/drawer-actions.js @@ -34,7 +34,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/5.x/hidden-components.js b/static/examples/5.x/hidden-components.js index 6f6eee0d346..3b7d45fbf83 100755 --- a/static/examples/5.x/hidden-components.js +++ b/static/examples/5.x/hidden-components.js @@ -23,8 +23,8 @@ export default function App() { {() => ( - null}> - + null}> + )} diff --git a/static/examples/5.x/safe-area-example.js b/static/examples/5.x/safe-area-example.js index c842ea6a7c9..9fd20c1e40b 100755 --- a/static/examples/5.x/safe-area-example.js +++ b/static/examples/5.x/safe-area-example.js @@ -26,8 +26,8 @@ export default function App() { {() => ( - null}> - + null}> + )} diff --git a/static/examples/5.x/tab-actions.js b/static/examples/5.x/tab-actions.js index 46ce0e54bc5..9e70e2d9bf3 100755 --- a/static/examples/5.x/tab-actions.js +++ b/static/examples/5.x/tab-actions.js @@ -21,7 +21,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/5.x/use-safe-area.js b/static/examples/5.x/use-safe-area.js index 09a015b70ac..907f3c0869a 100755 --- a/static/examples/5.x/use-safe-area.js +++ b/static/examples/5.x/use-safe-area.js @@ -34,8 +34,8 @@ export default function App() { {() => ( - null}> - + null}> + )} diff --git a/static/examples/6.x/drawer-actions.js b/static/examples/6.x/drawer-actions.js index 2576b6812f8..90120107e4f 100755 --- a/static/examples/6.x/drawer-actions.js +++ b/static/examples/6.x/drawer-actions.js @@ -34,7 +34,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/6.x/hidden-components.js b/static/examples/6.x/hidden-components.js index baa2de5e7bf..c66995fcbfb 100755 --- a/static/examples/6.x/hidden-components.js +++ b/static/examples/6.x/hidden-components.js @@ -27,11 +27,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/static/examples/6.x/safe-area-example.js b/static/examples/6.x/safe-area-example.js index df9f692f61f..02a6c474449 100755 --- a/static/examples/6.x/safe-area-example.js +++ b/static/examples/6.x/safe-area-example.js @@ -43,11 +43,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/static/examples/6.x/tab-actions.js b/static/examples/6.x/tab-actions.js index 46ce0e54bc5..9e70e2d9bf3 100755 --- a/static/examples/6.x/tab-actions.js +++ b/static/examples/6.x/tab-actions.js @@ -21,7 +21,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/6.x/use-safe-area.js b/static/examples/6.x/use-safe-area.js index aeff43cfd29..09ebd602e0b 100755 --- a/static/examples/6.x/use-safe-area.js +++ b/static/examples/6.x/use-safe-area.js @@ -38,11 +38,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/static/examples/7.x/drawer-actions.js b/static/examples/7.x/drawer-actions.js index 2576b6812f8..90120107e4f 100755 --- a/static/examples/7.x/drawer-actions.js +++ b/static/examples/7.x/drawer-actions.js @@ -34,7 +34,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/7.x/hidden-components.js b/static/examples/7.x/hidden-components.js index baa2de5e7bf..c66995fcbfb 100755 --- a/static/examples/7.x/hidden-components.js +++ b/static/examples/7.x/hidden-components.js @@ -27,11 +27,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/static/examples/7.x/safe-area-example.js b/static/examples/7.x/safe-area-example.js index df9f692f61f..02a6c474449 100755 --- a/static/examples/7.x/safe-area-example.js +++ b/static/examples/7.x/safe-area-example.js @@ -43,11 +43,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/static/examples/7.x/tab-actions.js b/static/examples/7.x/tab-actions.js index 46ce0e54bc5..9e70e2d9bf3 100755 --- a/static/examples/7.x/tab-actions.js +++ b/static/examples/7.x/tab-actions.js @@ -21,7 +21,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/static/examples/7.x/use-safe-area.js b/static/examples/7.x/use-safe-area.js index aeff43cfd29..09ebd602e0b 100755 --- a/static/examples/7.x/use-safe-area.js +++ b/static/examples/7.x/use-safe-area.js @@ -38,11 +38,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/versioned_docs/version-3.x/function-after-focusing-screen.md b/versioned_docs/version-3.x/function-after-focusing-screen.md index 195347f8642..78476315b82 100644 --- a/versioned_docs/version-3.x/function-after-focusing-screen.md +++ b/versioned_docs/version-3.x/function-after-focusing-screen.md @@ -17,7 +17,7 @@ react-navigation provides a [higher order component](https://reactjs.org/docs/hi When the `isFocused` prop is passed to our component, it will pass `true` when the screen is focused and `false` when our component is no longer focused. This enables us to call actions on a user entering or leaving a screen. This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location. -Since `withNavigationFocus` passes a prop on every focus change, it will cause our component to re-render when we focus and unfocus a screen. Using this higher order component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. +Since `withNavigationFocus` passes a prop on every focus change, it will cause our component to re-render when we focus and lose focus on a screen. Using this higher order component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. For instance, if we are attempting to make an API call on focus to fetch some data, we only want to fetch data when the component is focused and not when the component becomes unfocused. To prevent extra component re-renders, we could write some logic in `shouldComponentUpdate` to control when the component renders itself, however we may be better off using the event listener method detailed below. The event listener will only call an action and render the component when the screen is focused and will do nothing when a screen becomes unfocused. diff --git a/versioned_docs/version-4.x/function-after-focusing-screen.md b/versioned_docs/version-4.x/function-after-focusing-screen.md index f9085d9ec66..fe6989f5b20 100644 --- a/versioned_docs/version-4.x/function-after-focusing-screen.md +++ b/versioned_docs/version-4.x/function-after-focusing-screen.md @@ -17,7 +17,7 @@ react-navigation provides a [higher order component](https://reactjs.org/docs/hi When the `isFocused` prop is passed to our component, it will pass `true` when the screen is focused and `false` when our component is no longer focused. This enables us to call actions on a user entering or leaving a screen. This is particularly handy when we are trying to stop something when the page is unfocused, like stopping a video or audio file from playing, or stopping the tracking of a user's location. -Since `withNavigationFocus` passes a prop on every focus change, it will cause our component to re-render when we focus and unfocus a screen. Using this higher order component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. +Since `withNavigationFocus` passes a prop on every focus change, it will cause our component to re-render when we focus and lose focus on a screen. Using this higher order component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. For instance, if we are attempting to make an API call on focus to fetch some data, we only want to fetch data when the component is focused and not when the component becomes unfocused. To prevent extra component re-renders, we could write some logic in `shouldComponentUpdate` to control when the component renders itself, however we may be better off using the event listener method detailed below. The event listener will only call an action and render the component when the screen is focused and will do nothing when a screen becomes unfocused. diff --git a/versioned_docs/version-5.x/function-after-focusing-screen.md b/versioned_docs/version-5.x/function-after-focusing-screen.md index 36da21869a5..57edf364834 100755 --- a/versioned_docs/version-5.x/function-after-focusing-screen.md +++ b/versioned_docs/version-5.x/function-after-focusing-screen.md @@ -75,7 +75,7 @@ React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) th The hook will return `true` when the screen is focused and `false` when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not. -The `useIsFocused` hook will cause our component to re-render when we focus and unfocus a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. +The `useIsFocused` hook will cause our component to re-render when we focus and lose focus on a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. diff --git a/versioned_docs/version-5.x/server-rendering.md b/versioned_docs/version-5.x/server-rendering.md index 7b8e6a53b60..fa3089669f5 100644 --- a/versioned_docs/version-5.x/server-rendering.md +++ b/versioned_docs/version-5.x/server-rendering.md @@ -163,7 +163,7 @@ function NotFound() { const status = React.useContext(StatusCodeContext); if (status) { - staus.code = 404; + status.code = 404; } return ( diff --git a/versioned_docs/version-5.x/state-persistence.md b/versioned_docs/version-5.x/state-persistence.md index 62dda684cd9..0030e515816 100755 --- 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. - + ```js import * as React from 'react'; diff --git a/versioned_docs/version-6.x/function-after-focusing-screen.md b/versioned_docs/version-6.x/function-after-focusing-screen.md index bb7ba6ad22a..32ee440d048 100755 --- a/versioned_docs/version-6.x/function-after-focusing-screen.md +++ b/versioned_docs/version-6.x/function-after-focusing-screen.md @@ -79,7 +79,7 @@ React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) th The hook will return `true` when the screen is focused and `false` when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not. -The `useIsFocused` hook will cause our component to re-render when we focus and unfocus a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. +The `useIsFocused` hook will cause our component to re-render when we focus and lose focus on a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 67f096165ae..df83a720807 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -431,7 +431,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 appearance 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/server-rendering.md b/versioned_docs/version-6.x/server-rendering.md index 814a1ad0adb..0e92ca61112 100644 --- a/versioned_docs/version-6.x/server-rendering.md +++ b/versioned_docs/version-6.x/server-rendering.md @@ -161,7 +161,7 @@ function NotFound() { const status = React.useContext(StatusCodeContext); if (status) { - staus.code = 404; + status.code = 404; } return ( diff --git a/versioned_docs/version-6.x/state-persistence.md b/versioned_docs/version-6.x/state-persistence.md index d697850d2f4..3168160a3ba 100755 --- 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. - + ```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 index 0500a6312c1..1342e02cab3 100755 --- a/versioned_docs/version-7.x/drawer-actions.md +++ b/versioned_docs/version-7.x/drawer-actions.md @@ -64,7 +64,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -149,7 +151,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -236,7 +240,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -319,7 +325,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -416,7 +424,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -500,7 +510,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -596,7 +608,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -680,7 +694,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } diff --git a/versioned_docs/version-7.x/function-after-focusing-screen.md b/versioned_docs/version-7.x/function-after-focusing-screen.md index 24da95e0a02..fb2d27c9f3c 100755 --- a/versioned_docs/version-7.x/function-after-focusing-screen.md +++ b/versioned_docs/version-7.x/function-after-focusing-screen.md @@ -240,7 +240,7 @@ React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) th The hook will return `true` when the screen is focused and `false` when our component is no longer focused. This enables us to render something conditionally based on whether the user is on the screen or not. -The `useIsFocused` hook will cause our component to re-render when we focus and unfocus a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. +The `useIsFocused` hook will cause our component to re-render when we focus and lose focus on a screen. Using this hook component may introduce unnecessary component re-renders as a screen comes in and out of focus. This could cause issues depending on the type of action we're calling on focusing. Hence we recommend to use this hook only if you need to trigger a re-render. For side-effects such as subscribing to events or fetching data, use the methods described above. diff --git a/versioned_docs/version-7.x/handling-safe-area.md b/versioned_docs/version-7.x/handling-safe-area.md index 6d5ced2dcf7..207dbbc5002 100755 --- a/versioned_docs/version-7.x/handling-safe-area.md +++ b/versioned_docs/version-7.x/handling-safe-area.md @@ -65,7 +65,7 @@ function Demo() { // codeblock-focus-start const MyTabs = createBottomTabNavigator({ - initialRouteName: 'Analitics', + initialRouteName: 'Analytics', // highlight-start tabBar: () => null, screenOptions: { @@ -73,7 +73,7 @@ const MyTabs = createBottomTabNavigator({ }, // highlight-end screens: { - Analitics: Demo, + Analytics: Demo, Profile: Demo, }, }); @@ -133,11 +133,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} @@ -195,13 +195,13 @@ function Demo() { // codeblock-focus-end const MyTabs = createBottomTabNavigator({ - initialRouteName: 'Analitics', + initialRouteName: 'Analytics', tabBar: () => null, screenOptions: { headerShown: false, }, screens: { - Analitics: Demo, + Analytics: Demo, Profile: Demo, }, }); @@ -285,11 +285,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} @@ -363,13 +363,13 @@ function Demo() { // codeblock-focus-end const MyTabs = createBottomTabNavigator({ - initialRouteName: 'Analitics', + initialRouteName: 'Analytics', tabBar: () => null, screenOptions: { headerShown: false, }, screens: { - Analitics: Demo, + Analytics: Demo, Profile: Demo, }, }); @@ -448,11 +448,11 @@ export default function App() { {() => ( null} screenOptions={{ headerShown: false }} > - + )} diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index 4c31be33b64..698f9bdf0be 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -677,7 +677,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 appearance 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 index 26e6a0970ec..ae5e10355fd 100644 --- 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() { -```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/server-rendering.md b/versioned_docs/version-7.x/server-rendering.md index 0c388ffcb38..d18be5fb2b9 100644 --- a/versioned_docs/version-7.x/server-rendering.md +++ b/versioned_docs/version-7.x/server-rendering.md @@ -213,7 +213,7 @@ function NotFound() { const status = React.useContext(StatusCodeContext); if (status) { - staus.code = 404; + status.code = 404; } return ( diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md index 3e8fd06add7..8dac0ec317a 100755 --- a/versioned_docs/version-7.x/tab-actions.md +++ b/versioned_docs/version-7.x/tab-actions.md @@ -58,7 +58,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); } @@ -117,7 +119,9 @@ function ProfileScreen({ route }) { return ( Profile! - {route?.params?.user ? route.params.user : 'Noone'}'s profile + + {route?.params?.user ? route.params.user : 'No one'}'s profile + ); }