diff --git a/static/examples/5.x/drawer-actions.js b/static/examples/5.x/drawer-actions.js index 2576b6812f..90120107e4 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 6f6eee0d34..3b7d45fbf8 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 c842ea6a7c..9fd20c1e40 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 46ce0e54bc..9e70e2d9bf 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 09a015b70a..907f3c0869 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 2576b6812f..90120107e4 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 baa2de5e7b..c66995fcbf 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 df9f692f61..02a6c47444 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 46ce0e54bc..9e70e2d9bf 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 aeff43cfd2..09ebd602e0 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 2576b6812f..90120107e4 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 baa2de5e7b..c66995fcbf 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 df9f692f61..02a6c47444 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 46ce0e54bc..9e70e2d9bf 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 aeff43cfd2..09ebd602e0 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 195347f864..78476315b8 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 f9085d9ec6..fe6989f5b2 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 36da21869a..57edf36483 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 7b8e6a53b6..fa3089669f 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 62dda684cd..0030e51581 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 bb7ba6ad22..32ee440d04 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 67f096165a..df83a72080 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 814a1ad0ad..0e92ca6111 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 d697850d2f..3168160a3b 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 0500a6312c..1342e02cab 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 24da95e0a0..fb2d27c9f3 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 6d5ced2dcf..207dbbc500 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 4c31be33b6..698f9bdf0b 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 26e6a0970e..ae5e10355f 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 0c388ffcb3..d18be5fb2b 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 3e8fd06add..8dac0ec317 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 + ); }