Skip to content

docs: Updated references to React documentation #1362

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

Merged
merged 7 commits into from
Aug 28, 2024
Merged
Show file tree
Hide file tree
Changes from 4 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
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/bottom-tab-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ To show your screen under the tab bar, you can set the `position` style to absol

You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically.

To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useBottomTabBarHeight`:
To get the height of the bottom tab bar, you can use `BottomTabBarHeightContext` with [React's Context API](https://react.dev/reference/react/useContext) or `useBottomTabBarHeight`:

```js
import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/configuring-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@ Another thing to keep in mind is that it's not possible to pass params to the in
In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params.

Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them.
Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them.

## Matching exact paths

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ This is useful if you want to render a semi-transparent header or a blurred back

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](#useheaderheight).
To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext) or [`useHeaderHeight`](#useheaderheight).

#### `headerBackground`

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ If you're already familiar with JavaScript, React and React Native, then you'll

Here are some resources to help you out:

1. [React Native Express](https://www.reactnative.express) (Sections 1 to 4)
1. [React Native](https://reactnative.dev/docs/getting-started) (Sections 1 to 4)
2. [Main Concepts of React](https://react.dev/learn)
3. [React Hooks](https://react.dev/reference/react)
4. [React Context](https://react.dev/learn/passing-data-deeply-with-context) (Advanced)
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/hello-react-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ Sometimes we will want to specify the same options for all of the screens in the

Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:

1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended).
1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
2. Use a render callback for the screen instead of specifying a `component` prop:

```js
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 @@ -166,7 +166,7 @@ This is useful if you want to render a semi-transparent header or a blurred back

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight).
To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext) or [`useHeaderHeight`](elements.md#useheaderheight).

#### `headerBlurEffect`

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/nesting-navigators.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes

For example, any `params` passed to a screen in a nested navigator are in the `route` prop of that screen and aren't accessible from a screen in a parent or child navigator.

If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children.
If you need to access params of the parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose params to children.

### Navigation actions are handled by current navigator and bubble up if couldn't be handled

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ Render callback to return React Element to use for the screen:
</Stack.Screen>
```

You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead.
You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://react.dev/reference/react/useContext) for passing data instead.

:::warning

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-6.x/tab-based-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />
```

From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).

![Tabs with badges](/assets/navigators/tabs/tabs-badges.png)

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/configuring-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -910,7 +910,7 @@ Another thing to keep in mind is that it's not possible to pass params to the in
In this case, any params in the URL are only passed to the `Profile` screen which matches the path pattern `users/:id`, and the `Feed` screen doesn't receive any params. If you want to have the same params in the `Feed` screen, you can specify a [custom `getStateFromPath` function](navigation-container.md#linkinggetstatefrompath) and copy those params.

Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose them.
Similarly, if you want to access params of a parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose them.

## Matching exact paths

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ This is useful if you want to render a semi-transparent header or a blurred back

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](#useheaderheight).
To get the height of the header, you can use [`HeaderHeightContext`](#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight).

#### `headerBackground`

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ If you're already familiar with JavaScript, React and React Native, then you'll

Here are some resources to help you out:

1. [React Native Express](https://www.reactnative.express) (Sections 1 to 4)
1. [React Native](https://reactnative.dev/docs/getting-started) (Sections 1 to 4)
2. [Main Concepts of React](https://react.dev/learn)
3. [React Hooks](https://react.dev/reference/react)
4. [React Context](https://react.dev/learn/passing-data-deeply-with-context) (Advanced)
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/hello-react-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@ Passing additional props to a screen is not supported in the static API.

Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:

1. Use [React context](https://reactjs.org/docs/context.html) and wrap the navigator with a context provider to pass data to the screens (recommended).
1. Use [React context](https://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended).
2. Use a render callback for the screen instead of specifying a `component` prop:

```js
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/native-stack-navigator.md
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ This is useful if you want to render a semi-transparent header or a blurred back

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight).
To get the height of the header, you can use [`HeaderHeightContext`](elements.md#headerheightcontext) with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight).

#### `headerBlurEffect`

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/nesting-navigators.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ If you want to achieve this behavior, see the guide for [screen options with nes

For example, any `params` passed to a screen in a nested navigator are in the `route` object of that screen and aren't accessible from a screen in a parent or child navigator.

If you need to access params of the parent screen from a child screen, you can use [React Context](https://reactjs.org/docs/context.html) to expose params to children.
If you need to access params of the parent screen from a child screen, you can use [React Context](https://react.dev/reference/react/useContext) to expose params to children.

### Navigation actions are handled by current navigator and bubble up if couldn't be handled

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ Another way is to pass a render callback to return React Element to use for the
</Stack.Screen>
```

You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead.
You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://react.dev/reference/react/useContext) for passing data instead.

:::warning

Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-7.x/tab-based-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ export default function App() {
</TabItem>
</Tabs>

From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).
From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using [React Context](https://react.dev/reference/react/useContext), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/) or [event emitters](https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js).

![Tabs with badges](/assets/navigators/tabs/tabs-badges.png)

Expand Down
Loading