Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix typos #1366

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion static/examples/5.x/drawer-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/5.x/hidden-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,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>
)}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/5.x/safe-area-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,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>
)}
Expand Down
4 changes: 3 additions & 1 deletion static/examples/5.x/tab-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/5.x/use-safe-area.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,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>
)}
Expand Down
4 changes: 3 additions & 1 deletion static/examples/6.x/drawer-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/hidden-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,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>
)}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/safe-area-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,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>
)}
Expand Down
4 changes: 3 additions & 1 deletion static/examples/6.x/tab-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/6.x/use-safe-area.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,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>
)}
Expand Down
4 changes: 3 additions & 1 deletion static/examples/7.x/drawer-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/7.x/hidden-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,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>
)}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/7.x/safe-area-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,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>
)}
Expand Down
4 changes: 3 additions & 1 deletion static/examples/7.x/tab-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,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>
);
}
Expand Down
4 changes: 2 additions & 2 deletions static/examples/7.x/use-safe-area.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,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>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<samp id="use-is-focused" />

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-5.x/server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function NotFound() {
const status = React.useContext(StatusCodeContext);

if (status) {
staus.code = 404;
status.code = 404;
}

return (
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-5.x/state-persistence.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<samp id="use-is-focused" />

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/native-stack-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ function NotFound() {
const status = React.useContext(StatusCodeContext);

if (status) {
staus.code = 404;
status.code = 404;
}

return (
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/state-persistence.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
32 changes: 24 additions & 8 deletions versioned_docs/version-7.x/drawer-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,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>
);
}
Expand Down Expand Up @@ -149,7 +151,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>
);
}
Expand Down Expand Up @@ -236,7 +240,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>
);
}
Expand Down Expand Up @@ -319,7 +325,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>
);
}
Expand Down Expand Up @@ -416,7 +424,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>
);
}
Expand Down Expand Up @@ -500,7 +510,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>
);
}
Expand Down Expand Up @@ -596,7 +608,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>
);
}
Expand Down Expand Up @@ -680,7 +694,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>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Tabs groupId="config" queryString="config">
<TabItem value="static" label="Static" default>
Expand Down
Loading
Loading