From 6d50f573c26e230fd193e0b1f185f2d26e43a58a Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 7 Aug 2024 16:50:40 +0200 Subject: [PATCH 1/6] docs: Updated link to react context --- versioned_docs/version-3.x/localization.md | 2 +- versioned_docs/version-3.x/tab-based-navigation.md | 2 +- versioned_docs/version-3.x/themes.md | 2 +- versioned_docs/version-4.x/localization.md | 2 +- versioned_docs/version-4.x/stack-navigator.md | 2 +- versioned_docs/version-4.x/tab-based-navigation.md | 2 +- versioned_docs/version-4.x/themes.md | 2 +- versioned_docs/version-5.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-5.x/configuring-links.md | 2 +- versioned_docs/version-5.x/getting-started.md | 2 +- versioned_docs/version-5.x/hello-react-navigation.md | 2 +- versioned_docs/version-5.x/nesting-navigators.md | 2 +- versioned_docs/version-5.x/screen.md | 2 +- versioned_docs/version-5.x/stack-navigator.md | 2 +- versioned_docs/version-5.x/tab-based-navigation.md | 2 +- versioned_docs/version-5.x/upgrading-from-4.x.md | 2 +- versioned_docs/version-6.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-6.x/configuring-links.md | 2 +- versioned_docs/version-6.x/elements.md | 2 +- versioned_docs/version-6.x/hello-react-navigation.md | 2 +- versioned_docs/version-6.x/native-stack-navigator.md | 2 +- versioned_docs/version-6.x/nesting-navigators.md | 2 +- versioned_docs/version-6.x/screen.md | 2 +- versioned_docs/version-6.x/tab-based-navigation.md | 2 +- versioned_docs/version-7.x/configuring-links.md | 2 +- versioned_docs/version-7.x/elements.md | 2 +- versioned_docs/version-7.x/hello-react-navigation.md | 2 +- versioned_docs/version-7.x/native-stack-navigator.md | 2 +- versioned_docs/version-7.x/nesting-navigators.md | 2 +- versioned_docs/version-7.x/screen.md | 2 +- versioned_docs/version-7.x/tab-based-navigation.md | 2 +- 31 files changed, 31 insertions(+), 31 deletions(-) diff --git a/versioned_docs/version-3.x/localization.md b/versioned_docs/version-3.x/localization.md index 34a7e6b53d6..ebe03a8851a 100644 --- a/versioned_docs/version-3.x/localization.md +++ b/versioned_docs/version-3.x/localization.md @@ -100,4 +100,4 @@ class Screen extends React.Component { } ``` -You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that. +You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that. diff --git a/versioned_docs/version-3.x/tab-based-navigation.md b/versioned_docs/version-3.x/tab-based-navigation.md index ffb9ad788d4..84eb86469c0 100644 --- a/versioned_docs/version-3.x/tab-based-navigation.md +++ b/versioned_docs/version-3.x/tab-based-navigation.md @@ -133,7 +133,7 @@ export default class IconWithBadge extends React.Component { } ``` -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). ```js const HomeIconWithBadge = (props) => { diff --git a/versioned_docs/version-3.x/themes.md b/versioned_docs/version-3.x/themes.md index 849c2906a96..1e4e4e17562 100644 --- a/versioned_docs/version-3.x/themes.md +++ b/versioned_docs/version-3.x/themes.md @@ -241,7 +241,7 @@ You may want more control than what you're given with just the built-in themes. Building custom themes into an app with React Navigation is not too much different than a React app without it; the main differences are that you will need to use `screenProps` in order to update style properties controlled by `navigationOptions`, and when style properties are controlled in navigator configuration we'll need to take another approach. First we're going to recap how you would theme a React app without React Navigation, then we will dive deeper into these differences. Additionally, this guide assumes that you are already comfortable with React Navigation, in particular how to use and configure navigators. -React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://reactjs.org/docs/context.html) for it before continuing. +React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://react.dev/reference/react/useContext) for it before continuing. ```jsx import * as React from 'react'; diff --git a/versioned_docs/version-4.x/localization.md b/versioned_docs/version-4.x/localization.md index 34a7e6b53d6..ebe03a8851a 100644 --- a/versioned_docs/version-4.x/localization.md +++ b/versioned_docs/version-4.x/localization.md @@ -100,4 +100,4 @@ class Screen extends React.Component { } ``` -You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that. +You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that. diff --git a/versioned_docs/version-4.x/stack-navigator.md b/versioned_docs/version-4.x/stack-navigator.md index b7983ddfd96..6f41c49aa54 100644 --- a/versioned_docs/version-4.x/stack-navigator.md +++ b/versioned_docs/version-4.x/stack-navigator.md @@ -248,7 +248,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` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`: +To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`: ```js import { HeaderHeightContext } from 'react-navigation-stack'; diff --git a/versioned_docs/version-4.x/tab-based-navigation.md b/versioned_docs/version-4.x/tab-based-navigation.md index f4f47b576a1..da931ae6c4e 100644 --- a/versioned_docs/version-4.x/tab-based-navigation.md +++ b/versioned_docs/version-4.x/tab-based-navigation.md @@ -137,7 +137,7 @@ export default class IconWithBadge extends React.Component { } ``` -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). ```js const HomeIconWithBadge = (props) => { diff --git a/versioned_docs/version-4.x/themes.md b/versioned_docs/version-4.x/themes.md index 7c92af05888..3d3d310f52e 100644 --- a/versioned_docs/version-4.x/themes.md +++ b/versioned_docs/version-4.x/themes.md @@ -245,7 +245,7 @@ You may want more control than what you're given with just the built-in themes. Building custom themes into an app with React Navigation is not too much different than a React app without it; the main differences are that you will need to use `screenProps` in order to update style properties controlled by `navigationOptions`, and when style properties are controlled in navigator configuration we'll need to take another approach. First we're going to recap how you would theme a React app without React Navigation, then we will dive deeper into these differences. Additionally, this guide assumes that you are already comfortable with React Navigation, in particular how to use and configure navigators. -React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://reactjs.org/docs/context.html) for it before continuing. +React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://react.dev/reference/react/useContext) for it before continuing. ```jsx import * as React from 'react'; diff --git a/versioned_docs/version-5.x/bottom-tab-navigator.md b/versioned_docs/version-5.x/bottom-tab-navigator.md index 99aefc35a01..5e901aee713 100755 --- a/versioned_docs/version-5.x/bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/bottom-tab-navigator.md @@ -247,7 +247,7 @@ style: { 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#contextconsumer) or `useBottomTabBarHeight`: ```js import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; diff --git a/versioned_docs/version-5.x/configuring-links.md b/versioned_docs/version-5.x/configuring-links.md index 4542bece964..a5c7d061766 100644 --- a/versioned_docs/version-5.x/configuring-links.md +++ b/versioned_docs/version-5.x/configuring-links.md @@ -446,7 +446,7 @@ It's not possible to pass params to the initial screen through the URL. So make 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 diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md index 5cead6283ab..68ac0ac6ae2 100755 --- a/versioned_docs/version-5.x/getting-started.md +++ b/versioned_docs/version-5.x/getting-started.md @@ -15,7 +15,7 @@ Here are some resources to help you out: 1. [React Native Express](http://reactnativeexpress.com/) (Sections 1 to 4) 2. [Main Concepts of React](https://reactjs.org/docs/hello-world.html) 3. [React Hooks](https://reactjs.org/docs/hooks-intro.html) -4. [React Context](https://reactjs.org/docs/context.html) (Advanced) +4. [React Context](https://react.dev/reference/react/useContext) (Advanced) ## Installation diff --git a/versioned_docs/version-5.x/hello-react-navigation.md b/versioned_docs/version-5.x/hello-react-navigation.md index 22c55b7fa96..57bf8357f8d 100755 --- a/versioned_docs/version-5.x/hello-react-navigation.md +++ b/versioned_docs/version-5.x/hello-react-navigation.md @@ -122,7 +122,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 diff --git a/versioned_docs/version-5.x/nesting-navigators.md b/versioned_docs/version-5.x/nesting-navigators.md index 5aa410f5cfd..6537501e3b0 100755 --- a/versioned_docs/version-5.x/nesting-navigators.md +++ b/versioned_docs/version-5.x/nesting-navigators.md @@ -60,7 +60,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 diff --git a/versioned_docs/version-5.x/screen.md b/versioned_docs/version-5.x/screen.md index 7d196003506..23243f84175 100644 --- a/versioned_docs/version-5.x/screen.md +++ b/versioned_docs/version-5.x/screen.md @@ -130,6 +130,6 @@ Render callback to return React Element to use for the 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. > Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. diff --git a/versioned_docs/version-5.x/stack-navigator.md b/versioned_docs/version-5.x/stack-navigator.md index 73071371465..076577a41f4 100755 --- a/versioned_docs/version-5.x/stack-navigator.md +++ b/versioned_docs/version-5.x/stack-navigator.md @@ -285,7 +285,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` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`: +To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`: ```js import { HeaderHeightContext } from '@react-navigation/stack'; diff --git a/versioned_docs/version-5.x/tab-based-navigation.md b/versioned_docs/version-5.x/tab-based-navigation.md index d9634264ef4..acc4e901e12 100755 --- a/versioned_docs/version-5.x/tab-based-navigation.md +++ b/versioned_docs/version-5.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -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) diff --git a/versioned_docs/version-5.x/upgrading-from-4.x.md b/versioned_docs/version-5.x/upgrading-from-4.x.md index d44e41d1ae3..0028c656e0d 100755 --- a/versioned_docs/version-5.x/upgrading-from-4.x.md +++ b/versioned_docs/version-5.x/upgrading-from-4.x.md @@ -383,7 +383,7 @@ However, using `screenProps` had some disadvantages: - When using a type-checker like TypeScript, it was necessary to annotate `screenProps` every time we want to use it, which wasn't type-safe or convenient. - You could only access `screenProps` in screens. To access them in child components, you needed to pass them down as props manually. It's very inconvenient for things like translation where we often use it in a lot of components. -Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://reactjs.org/docs/context.html). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API! +Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://react.dev/reference/react/useContext). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API! ## Themes diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md index 17d190ee37d..de8f09de5ed 100755 --- a/versioned_docs/version-6.x/bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/bottom-tab-navigator.md @@ -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#contextconsumer) or `useBottomTabBarHeight`: ```js import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; diff --git a/versioned_docs/version-6.x/configuring-links.md b/versioned_docs/version-6.x/configuring-links.md index 7f4d4470afc..a0e24f2f50b 100644 --- a/versioned_docs/version-6.x/configuring-links.md +++ b/versioned_docs/version-6.x/configuring-links.md @@ -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 diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md index 84304a7c8c6..a45c06b28c6 100644 --- a/versioned_docs/version-6.x/elements.md +++ b/versioned_docs/version-6.x/elements.md @@ -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#contextconsumer) or [`useHeaderHeight`](#useheaderheight). #### `headerBackground` diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 946ea1737f3..78f38b9091d 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -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 diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 67f096165ae..5d83b323ee9 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -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#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). #### `headerBlurEffect` diff --git a/versioned_docs/version-6.x/nesting-navigators.md b/versioned_docs/version-6.x/nesting-navigators.md index d5849d3eba7..d490c434b23 100755 --- a/versioned_docs/version-6.x/nesting-navigators.md +++ b/versioned_docs/version-6.x/nesting-navigators.md @@ -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 diff --git a/versioned_docs/version-6.x/screen.md b/versioned_docs/version-6.x/screen.md index a97eb9f7de7..32c858b5ecf 100644 --- a/versioned_docs/version-6.x/screen.md +++ b/versioned_docs/version-6.x/screen.md @@ -170,7 +170,7 @@ Render callback to return React Element to use for the 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 diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 08e7eef4570..173d60dc0f2 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -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) diff --git a/versioned_docs/version-7.x/configuring-links.md b/versioned_docs/version-7.x/configuring-links.md index a387d79be5f..592c5aa5292 100644 --- a/versioned_docs/version-7.x/configuring-links.md +++ b/versioned_docs/version-7.x/configuring-links.md @@ -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 diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 713f38fa6c7..08d1b47cc20 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -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` diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 666056ea09c..3a6dddaec47 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -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 diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index fda80e8ebe8..7d6cef01453 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -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` diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index a1537b215ab..bb96f16f59b 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -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 diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md index b672203dc77..777e5ce01ef 100644 --- a/versioned_docs/version-7.x/screen.md +++ b/versioned_docs/version-7.x/screen.md @@ -348,7 +348,7 @@ Another way is to pass a render callback to return React Element to use for the ``` -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 diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md index 3bde9197125..eceef69f505 100755 --- a/versioned_docs/version-7.x/tab-based-navigation.md +++ b/versioned_docs/version-7.x/tab-based-navigation.md @@ -367,7 +367,7 @@ export default function App() { -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) From 03bc59768055283350f3495b3014ab1bce2aaaf5 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 7 Aug 2024 17:09:49 +0200 Subject: [PATCH 2/6] Revert "docs: Updated link to react context" This reverts commit 6d50f573c26e230fd193e0b1f185f2d26e43a58a. --- versioned_docs/version-6.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-6.x/configuring-links.md | 2 +- versioned_docs/version-6.x/elements.md | 2 +- versioned_docs/version-6.x/hello-react-navigation.md | 2 +- versioned_docs/version-6.x/native-stack-navigator.md | 2 +- versioned_docs/version-6.x/nesting-navigators.md | 2 +- versioned_docs/version-6.x/screen.md | 2 +- versioned_docs/version-6.x/tab-based-navigation.md | 2 +- versioned_docs/version-7.x/configuring-links.md | 2 +- versioned_docs/version-7.x/elements.md | 2 +- versioned_docs/version-7.x/hello-react-navigation.md | 2 +- versioned_docs/version-7.x/native-stack-navigator.md | 2 +- versioned_docs/version-7.x/nesting-navigators.md | 2 +- versioned_docs/version-7.x/screen.md | 2 +- versioned_docs/version-7.x/tab-based-navigation.md | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md index de8f09de5ed..17d190ee37d 100755 --- a/versioned_docs/version-6.x/bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/bottom-tab-navigator.md @@ -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://react.dev/reference/react/useContext#contextconsumer) or `useBottomTabBarHeight`: +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`: ```js import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; diff --git a/versioned_docs/version-6.x/configuring-links.md b/versioned_docs/version-6.x/configuring-links.md index a0e24f2f50b..7f4d4470afc 100644 --- a/versioned_docs/version-6.x/configuring-links.md +++ b/versioned_docs/version-6.x/configuring-links.md @@ -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://react.dev/reference/react/useContext) to expose them. +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. ## Matching exact paths diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md index a45c06b28c6..84304a7c8c6 100644 --- a/versioned_docs/version-6.x/elements.md +++ b/versioned_docs/version-6.x/elements.md @@ -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://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight). +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). #### `headerBackground` diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 78f38b9091d..946ea1737f3 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -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://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended). +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). 2. Use a render callback for the screen instead of specifying a `component` prop: ```js diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 5d83b323ee9..67f096165ae 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -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://react.dev/reference/react/useContext#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://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). #### `headerBlurEffect` diff --git a/versioned_docs/version-6.x/nesting-navigators.md b/versioned_docs/version-6.x/nesting-navigators.md index d490c434b23..d5849d3eba7 100755 --- a/versioned_docs/version-6.x/nesting-navigators.md +++ b/versioned_docs/version-6.x/nesting-navigators.md @@ -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://react.dev/reference/react/useContext) 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://reactjs.org/docs/context.html) to expose params to children. ### Navigation actions are handled by current navigator and bubble up if couldn't be handled diff --git a/versioned_docs/version-6.x/screen.md b/versioned_docs/version-6.x/screen.md index 32c858b5ecf..a97eb9f7de7 100644 --- a/versioned_docs/version-6.x/screen.md +++ b/versioned_docs/version-6.x/screen.md @@ -170,7 +170,7 @@ Render callback to return React Element to use for the 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://react.dev/reference/react/useContext) 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://reactjs.org/docs/context.html) for passing data instead. :::warning diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 173d60dc0f2..08e7eef4570 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -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). +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). ![Tabs with badges](/assets/navigators/tabs/tabs-badges.png) diff --git a/versioned_docs/version-7.x/configuring-links.md b/versioned_docs/version-7.x/configuring-links.md index 592c5aa5292..a387d79be5f 100644 --- a/versioned_docs/version-7.x/configuring-links.md +++ b/versioned_docs/version-7.x/configuring-links.md @@ -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://react.dev/reference/react/useContext) to expose them. +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. ## Matching exact paths diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 08d1b47cc20..713f38fa6c7 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -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://react.dev/reference/react/useContext#contextconsumer) or [`useHeaderHeight`](#useheaderheight). +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). #### `headerBackground` diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 3a6dddaec47..666056ea09c 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -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://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended). +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). 2. Use a render callback for the screen instead of specifying a `component` prop: ```js diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index 7d6cef01453..fda80e8ebe8 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -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://react.dev/reference/react/useContext#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://reactjs.org/docs/context.html#contextconsumer) or [`useHeaderHeight`](elements.md#useheaderheight). #### `headerBlurEffect` diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index bb96f16f59b..a1537b215ab 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -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://react.dev/reference/react/useContext) 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://reactjs.org/docs/context.html) to expose params to children. ### Navigation actions are handled by current navigator and bubble up if couldn't be handled diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md index 777e5ce01ef..b672203dc77 100644 --- a/versioned_docs/version-7.x/screen.md +++ b/versioned_docs/version-7.x/screen.md @@ -348,7 +348,7 @@ Another way is to pass a render callback to return React Element to use for the ``` -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. +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. :::warning diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md index eceef69f505..3bde9197125 100755 --- a/versioned_docs/version-7.x/tab-based-navigation.md +++ b/versioned_docs/version-7.x/tab-based-navigation.md @@ -367,7 +367,7 @@ export default function App() { -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). +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). ![Tabs with badges](/assets/navigators/tabs/tabs-badges.png) From 8cddb3d86f7e9f6624004c19ef4149f25459a71c Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 7 Aug 2024 17:10:49 +0200 Subject: [PATCH 3/6] docs: revert test --- versioned_docs/version-3.x/localization.md | 2 +- versioned_docs/version-3.x/tab-based-navigation.md | 2 +- versioned_docs/version-3.x/themes.md | 2 +- versioned_docs/version-4.x/localization.md | 2 +- versioned_docs/version-4.x/stack-navigator.md | 2 +- versioned_docs/version-4.x/tab-based-navigation.md | 2 +- versioned_docs/version-4.x/themes.md | 2 +- versioned_docs/version-5.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-5.x/configuring-links.md | 2 +- versioned_docs/version-5.x/getting-started.md | 2 +- versioned_docs/version-5.x/hello-react-navigation.md | 2 +- versioned_docs/version-5.x/nesting-navigators.md | 2 +- versioned_docs/version-5.x/screen.md | 2 +- versioned_docs/version-5.x/stack-navigator.md | 2 +- versioned_docs/version-5.x/tab-based-navigation.md | 2 +- versioned_docs/version-5.x/upgrading-from-4.x.md | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/versioned_docs/version-3.x/localization.md b/versioned_docs/version-3.x/localization.md index ebe03a8851a..34a7e6b53d6 100644 --- a/versioned_docs/version-3.x/localization.md +++ b/versioned_docs/version-3.x/localization.md @@ -100,4 +100,4 @@ class Screen extends React.Component { } ``` -You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that. +You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that. diff --git a/versioned_docs/version-3.x/tab-based-navigation.md b/versioned_docs/version-3.x/tab-based-navigation.md index 84eb86469c0..ffb9ad788d4 100644 --- a/versioned_docs/version-3.x/tab-based-navigation.md +++ b/versioned_docs/version-3.x/tab-based-navigation.md @@ -133,7 +133,7 @@ export default class IconWithBadge extends React.Component { } ``` -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). +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). ```js const HomeIconWithBadge = (props) => { diff --git a/versioned_docs/version-3.x/themes.md b/versioned_docs/version-3.x/themes.md index 1e4e4e17562..849c2906a96 100644 --- a/versioned_docs/version-3.x/themes.md +++ b/versioned_docs/version-3.x/themes.md @@ -241,7 +241,7 @@ You may want more control than what you're given with just the built-in themes. Building custom themes into an app with React Navigation is not too much different than a React app without it; the main differences are that you will need to use `screenProps` in order to update style properties controlled by `navigationOptions`, and when style properties are controlled in navigator configuration we'll need to take another approach. First we're going to recap how you would theme a React app without React Navigation, then we will dive deeper into these differences. Additionally, this guide assumes that you are already comfortable with React Navigation, in particular how to use and configure navigators. -React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://react.dev/reference/react/useContext) for it before continuing. +React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://reactjs.org/docs/context.html) for it before continuing. ```jsx import * as React from 'react'; diff --git a/versioned_docs/version-4.x/localization.md b/versioned_docs/version-4.x/localization.md index ebe03a8851a..34a7e6b53d6 100644 --- a/versioned_docs/version-4.x/localization.md +++ b/versioned_docs/version-4.x/localization.md @@ -100,4 +100,4 @@ class Screen extends React.Component { } ``` -You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://react.dev/reference/react/useContext) for help with that. +You can run this example in [this Snack](https://snack.expo.io/@react-navigation/localization-example). Again, you may want to go further than just passing this through `screenProps` if you want to make it easier to access the `t` function or the other `screenProps` from any React component (and not just screen components that are rendered by React Navigation). Refer to [themes](themes.md) and the [React documentation on context](https://reactjs.org/docs/context.html) for help with that. diff --git a/versioned_docs/version-4.x/stack-navigator.md b/versioned_docs/version-4.x/stack-navigator.md index 6f41c49aa54..b7983ddfd96 100644 --- a/versioned_docs/version-4.x/stack-navigator.md +++ b/versioned_docs/version-4.x/stack-navigator.md @@ -248,7 +248,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` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`: +To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`: ```js import { HeaderHeightContext } from 'react-navigation-stack'; diff --git a/versioned_docs/version-4.x/tab-based-navigation.md b/versioned_docs/version-4.x/tab-based-navigation.md index da931ae6c4e..f4f47b576a1 100644 --- a/versioned_docs/version-4.x/tab-based-navigation.md +++ b/versioned_docs/version-4.x/tab-based-navigation.md @@ -137,7 +137,7 @@ export default class IconWithBadge extends React.Component { } ``` -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). +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). ```js const HomeIconWithBadge = (props) => { diff --git a/versioned_docs/version-4.x/themes.md b/versioned_docs/version-4.x/themes.md index 3d3d310f52e..7c92af05888 100644 --- a/versioned_docs/version-4.x/themes.md +++ b/versioned_docs/version-4.x/themes.md @@ -245,7 +245,7 @@ You may want more control than what you're given with just the built-in themes. Building custom themes into an app with React Navigation is not too much different than a React app without it; the main differences are that you will need to use `screenProps` in order to update style properties controlled by `navigationOptions`, and when style properties are controlled in navigator configuration we'll need to take another approach. First we're going to recap how you would theme a React app without React Navigation, then we will dive deeper into these differences. Additionally, this guide assumes that you are already comfortable with React Navigation, in particular how to use and configure navigators. -React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://react.dev/reference/react/useContext) for it before continuing. +React's context API allows you to share state from an ancestor component to any of its descendants without explicitly passing the value through layers and layers of components ("prop drilling"). This is a useful tool in order to build themes because we can define the theme at the root of the app, and then access it from anywhere else and re-render every themed component whenever the theme changes. If you are not familiar with how to use context already, you might want to read the [React documentation](https://reactjs.org/docs/context.html) for it before continuing. ```jsx import * as React from 'react'; diff --git a/versioned_docs/version-5.x/bottom-tab-navigator.md b/versioned_docs/version-5.x/bottom-tab-navigator.md index 5e901aee713..99aefc35a01 100755 --- a/versioned_docs/version-5.x/bottom-tab-navigator.md +++ b/versioned_docs/version-5.x/bottom-tab-navigator.md @@ -247,7 +247,7 @@ style: { 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://react.dev/reference/react/useContext#contextconsumer) or `useBottomTabBarHeight`: +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`: ```js import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'; diff --git a/versioned_docs/version-5.x/configuring-links.md b/versioned_docs/version-5.x/configuring-links.md index a5c7d061766..4542bece964 100644 --- a/versioned_docs/version-5.x/configuring-links.md +++ b/versioned_docs/version-5.x/configuring-links.md @@ -446,7 +446,7 @@ It's not possible to pass params to the initial screen through the URL. So make 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://react.dev/reference/react/useContext) to expose them. +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. ## Matching exact paths diff --git a/versioned_docs/version-5.x/getting-started.md b/versioned_docs/version-5.x/getting-started.md index 68ac0ac6ae2..5cead6283ab 100755 --- a/versioned_docs/version-5.x/getting-started.md +++ b/versioned_docs/version-5.x/getting-started.md @@ -15,7 +15,7 @@ Here are some resources to help you out: 1. [React Native Express](http://reactnativeexpress.com/) (Sections 1 to 4) 2. [Main Concepts of React](https://reactjs.org/docs/hello-world.html) 3. [React Hooks](https://reactjs.org/docs/hooks-intro.html) -4. [React Context](https://react.dev/reference/react/useContext) (Advanced) +4. [React Context](https://reactjs.org/docs/context.html) (Advanced) ## Installation diff --git a/versioned_docs/version-5.x/hello-react-navigation.md b/versioned_docs/version-5.x/hello-react-navigation.md index 57bf8357f8d..22c55b7fa96 100755 --- a/versioned_docs/version-5.x/hello-react-navigation.md +++ b/versioned_docs/version-5.x/hello-react-navigation.md @@ -122,7 +122,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://react.dev/reference/react/useContext) and wrap the navigator with a context provider to pass data to the screens (recommended). +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). 2. Use a render callback for the screen instead of specifying a `component` prop: ```js diff --git a/versioned_docs/version-5.x/nesting-navigators.md b/versioned_docs/version-5.x/nesting-navigators.md index 6537501e3b0..5aa410f5cfd 100755 --- a/versioned_docs/version-5.x/nesting-navigators.md +++ b/versioned_docs/version-5.x/nesting-navigators.md @@ -60,7 +60,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://react.dev/reference/react/useContext) 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://reactjs.org/docs/context.html) to expose params to children. ### Navigation actions are handled by current navigator and bubble up if couldn't be handled diff --git a/versioned_docs/version-5.x/screen.md b/versioned_docs/version-5.x/screen.md index 23243f84175..7d196003506 100644 --- a/versioned_docs/version-5.x/screen.md +++ b/versioned_docs/version-5.x/screen.md @@ -130,6 +130,6 @@ Render callback to return React Element to use for the 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://react.dev/reference/react/useContext) 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://reactjs.org/docs/context.html) for passing data instead. > Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. diff --git a/versioned_docs/version-5.x/stack-navigator.md b/versioned_docs/version-5.x/stack-navigator.md index 076577a41f4..73071371465 100755 --- a/versioned_docs/version-5.x/stack-navigator.md +++ b/versioned_docs/version-5.x/stack-navigator.md @@ -285,7 +285,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` with [React's Context API](https://react.dev/reference/react/useContext#contextconsumer) or `useHeaderHeight`: +To get the height of the header, you can use `HeaderHeightContext` with [React's Context API](https://reactjs.org/docs/context.html#contextconsumer) or `useHeaderHeight`: ```js import { HeaderHeightContext } from '@react-navigation/stack'; diff --git a/versioned_docs/version-5.x/tab-based-navigation.md b/versioned_docs/version-5.x/tab-based-navigation.md index acc4e901e12..d9634264ef4 100755 --- a/versioned_docs/version-5.x/tab-based-navigation.md +++ b/versioned_docs/version-5.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -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). +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). ![Tabs with badges](/assets/navigators/tabs/tabs-badges.png) diff --git a/versioned_docs/version-5.x/upgrading-from-4.x.md b/versioned_docs/version-5.x/upgrading-from-4.x.md index 0028c656e0d..d44e41d1ae3 100755 --- a/versioned_docs/version-5.x/upgrading-from-4.x.md +++ b/versioned_docs/version-5.x/upgrading-from-4.x.md @@ -383,7 +383,7 @@ However, using `screenProps` had some disadvantages: - When using a type-checker like TypeScript, it was necessary to annotate `screenProps` every time we want to use it, which wasn't type-safe or convenient. - You could only access `screenProps` in screens. To access them in child components, you needed to pass them down as props manually. It's very inconvenient for things like translation where we often use it in a lot of components. -Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://react.dev/reference/react/useContext). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API! +Due to the component based API of React Navigation 5.x, we have a much better alternative to `screenProps` which doesn't have these disadvantages: [React Context](https://reactjs.org/docs/context.html). Using React Context, it's possible to pass data to any child component in a performant and type-safe way, and we don't need to learn a new API! ## Themes From 04958c1d99e7c8ecc926d04197214e362e01a8bf Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 7 Aug 2024 17:20:18 +0200 Subject: [PATCH 4/6] docs: Updated link to react native and context --- versioned_docs/version-6.x/bottom-tab-navigator.md | 2 +- versioned_docs/version-6.x/configuring-links.md | 2 +- versioned_docs/version-6.x/elements.md | 2 +- versioned_docs/version-6.x/getting-started.md | 2 +- versioned_docs/version-6.x/hello-react-navigation.md | 2 +- versioned_docs/version-6.x/native-stack-navigator.md | 2 +- versioned_docs/version-6.x/nesting-navigators.md | 2 +- versioned_docs/version-6.x/screen.md | 2 +- versioned_docs/version-6.x/tab-based-navigation.md | 2 +- versioned_docs/version-7.x/configuring-links.md | 2 +- versioned_docs/version-7.x/elements.md | 2 +- versioned_docs/version-7.x/getting-started.md | 2 +- versioned_docs/version-7.x/hello-react-navigation.md | 2 +- versioned_docs/version-7.x/native-stack-navigator.md | 2 +- versioned_docs/version-7.x/nesting-navigators.md | 2 +- versioned_docs/version-7.x/screen.md | 2 +- versioned_docs/version-7.x/tab-based-navigation.md | 2 +- 17 files changed, 17 insertions(+), 17 deletions(-) diff --git a/versioned_docs/version-6.x/bottom-tab-navigator.md b/versioned_docs/version-6.x/bottom-tab-navigator.md index 17d190ee37d..65c3d3cb9b4 100755 --- a/versioned_docs/version-6.x/bottom-tab-navigator.md +++ b/versioned_docs/version-6.x/bottom-tab-navigator.md @@ -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'; diff --git a/versioned_docs/version-6.x/configuring-links.md b/versioned_docs/version-6.x/configuring-links.md index 7f4d4470afc..a0e24f2f50b 100644 --- a/versioned_docs/version-6.x/configuring-links.md +++ b/versioned_docs/version-6.x/configuring-links.md @@ -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 diff --git a/versioned_docs/version-6.x/elements.md b/versioned_docs/version-6.x/elements.md index 84304a7c8c6..6c099ad11f1 100644 --- a/versioned_docs/version-6.x/elements.md +++ b/versioned_docs/version-6.x/elements.md @@ -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` diff --git a/versioned_docs/version-6.x/getting-started.md b/versioned_docs/version-6.x/getting-started.md index 41d966a9ac9..ff66c4c1d29 100755 --- a/versioned_docs/version-6.x/getting-started.md +++ b/versioned_docs/version-6.x/getting-started.md @@ -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) diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 946ea1737f3..78f38b9091d 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -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 diff --git a/versioned_docs/version-6.x/native-stack-navigator.md b/versioned_docs/version-6.x/native-stack-navigator.md index 67f096165ae..015eae1f08e 100755 --- a/versioned_docs/version-6.x/native-stack-navigator.md +++ b/versioned_docs/version-6.x/native-stack-navigator.md @@ -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` diff --git a/versioned_docs/version-6.x/nesting-navigators.md b/versioned_docs/version-6.x/nesting-navigators.md index d5849d3eba7..d490c434b23 100755 --- a/versioned_docs/version-6.x/nesting-navigators.md +++ b/versioned_docs/version-6.x/nesting-navigators.md @@ -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 diff --git a/versioned_docs/version-6.x/screen.md b/versioned_docs/version-6.x/screen.md index a97eb9f7de7..32c858b5ecf 100644 --- a/versioned_docs/version-6.x/screen.md +++ b/versioned_docs/version-6.x/screen.md @@ -170,7 +170,7 @@ Render callback to return React Element to use for the 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 diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md index 08e7eef4570..173d60dc0f2 100755 --- a/versioned_docs/version-6.x/tab-based-navigation.md +++ b/versioned_docs/version-6.x/tab-based-navigation.md @@ -116,7 +116,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op ``` -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) diff --git a/versioned_docs/version-7.x/configuring-links.md b/versioned_docs/version-7.x/configuring-links.md index a387d79be5f..592c5aa5292 100644 --- a/versioned_docs/version-7.x/configuring-links.md +++ b/versioned_docs/version-7.x/configuring-links.md @@ -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 diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 713f38fa6c7..08d1b47cc20 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -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` diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md index 00b4f6cb338..540e76a8278 100755 --- a/versioned_docs/version-7.x/getting-started.md +++ b/versioned_docs/version-7.x/getting-started.md @@ -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) diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 666056ea09c..3a6dddaec47 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -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 diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index fda80e8ebe8..7d6cef01453 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -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` diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index a1537b215ab..bb96f16f59b 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -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 diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md index b672203dc77..777e5ce01ef 100644 --- a/versioned_docs/version-7.x/screen.md +++ b/versioned_docs/version-7.x/screen.md @@ -348,7 +348,7 @@ Another way is to pass a render callback to return React Element to use for the ``` -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 diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md index 3bde9197125..eceef69f505 100755 --- a/versioned_docs/version-7.x/tab-based-navigation.md +++ b/versioned_docs/version-7.x/tab-based-navigation.md @@ -367,7 +367,7 @@ export default function App() { -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) From 0dafa2a45a378be928aa58415feaebd1f070c36b Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Tue, 13 Aug 2024 10:19:10 +0200 Subject: [PATCH 5/6] docs: Updated all links to react docs in v6 an v7 --- versioned_docs/version-6.x/function-after-focusing-screen.md | 4 ++-- versioned_docs/version-6.x/hello-react-navigation.md | 2 +- versioned_docs/version-6.x/navigation-container.md | 2 +- versioned_docs/version-6.x/screen.md | 2 +- versioned_docs/version-6.x/use-is-focused.md | 2 +- versioned_docs/version-7.x/function-after-focusing-screen.md | 4 ++-- versioned_docs/version-7.x/hello-react-navigation.md | 2 +- versioned_docs/version-7.x/navigation-container.md | 2 +- versioned_docs/version-7.x/screen.md | 2 +- versioned_docs/version-7.x/use-is-focused.md | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) 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..e1a6ed08e14 100755 --- a/versioned_docs/version-6.x/function-after-focusing-screen.md +++ b/versioned_docs/version-6.x/function-after-focusing-screen.md @@ -47,7 +47,7 @@ In most cases, it's recommended to use the `useFocusEffect` hook instead of addi ## Triggering an action with the `useFocusEffect` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. +React Navigation provides a [hook](use-focus-effect.md) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. 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. @@ -75,7 +75,7 @@ See the [`useFocusEffect`](https://reactnavigation.org/docs/use-focus-effect/) d ## Re-rendering screen with the `useIsFocused` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that returns a boolean indicating whether the screen is focused or not. +React Navigation provides a [hook](use-is-focused.md) that returns a boolean indicating whether the screen is focused or not. 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. diff --git a/versioned_docs/version-6.x/hello-react-navigation.md b/versioned_docs/version-6.x/hello-react-navigation.md index 78f38b9091d..daa78673418 100755 --- a/versioned_docs/version-6.x/hello-react-navigation.md +++ b/versioned_docs/version-6.x/hello-react-navigation.md @@ -141,7 +141,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-6.x/navigation-container.md b/versioned_docs/version-6.x/navigation-container.md index b0662945558..f5708d8a60f 100644 --- a/versioned_docs/version-6.x/navigation-container.md +++ b/versioned_docs/version-6.x/navigation-container.md @@ -31,7 +31,7 @@ export default function App() { ## Ref -It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware. +It's also possible to attach a [`ref`](https://react.dev/learn/referencing-values-with-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware. Example: diff --git a/versioned_docs/version-6.x/screen.md b/versioned_docs/version-6.x/screen.md index 32c858b5ecf..5385e9d44ac 100644 --- a/versioned_docs/version-6.x/screen.md +++ b/versioned_docs/version-6.x/screen.md @@ -174,7 +174,7 @@ You can use this approach instead of the `component` prop if you need to pass ad :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-6.x/use-is-focused.md b/versioned_docs/version-6.x/use-is-focused.md index dbe2b1b2913..c99f7561460 100755 --- a/versioned_docs/version-6.x/use-is-focused.md +++ b/versioned_docs/version-6.x/use-is-focused.md @@ -20,7 +20,7 @@ function Profile() { } ``` -Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) to minimize re-renders for them. ## Using with class component 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..26528f8eebb 100755 --- a/versioned_docs/version-7.x/function-after-focusing-screen.md +++ b/versioned_docs/version-7.x/function-after-focusing-screen.md @@ -133,7 +133,7 @@ In most cases, it's recommended to use the `useFocusEffect` hook instead of addi ## Triggering an action with the `useFocusEffect` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. +React Navigation provides a [hook](use-focus-effect.md) that runs an effect when the screen comes into focus and cleans it up when it goes out of focus. This is useful for cases such as adding event listeners, for fetching data with an API call when a screen becomes focused, or any other action that needs to happen once the screen comes into view. 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. @@ -236,7 +236,7 @@ See the [`useFocusEffect`](https://reactnavigation.org/docs/use-focus-effect/) d ## Re-rendering screen with the `useIsFocused` hook -React Navigation provides a [hook](https://reactjs.org/docs/hooks-intro.html) that returns a boolean indicating whether the screen is focused or not. +React Navigation provides a [hook](use-is-focused.md) that returns a boolean indicating whether the screen is focused or not. 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. diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index 3a6dddaec47..8083664af50 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -501,7 +501,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index e4f7e7125ad..f43746676a5 100644 --- a/versioned_docs/version-7.x/navigation-container.md +++ b/versioned_docs/version-7.x/navigation-container.md @@ -62,7 +62,7 @@ export default function App() { ## Ref -It's possible to pass a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware. +It's possible to pass a [`ref`](https://react.dev/learn/referencing-values-with-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware. Example: diff --git a/versioned_docs/version-7.x/screen.md b/versioned_docs/version-7.x/screen.md index 777e5ce01ef..8589e630686 100644 --- a/versioned_docs/version-7.x/screen.md +++ b/versioned_docs/version-7.x/screen.md @@ -352,7 +352,7 @@ You can use this approach instead of the `component` prop if you need to pass ad :::warning -By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues. +By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) for your screen components to avoid performance issues. ::: diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index 0f874dbccc8..b0bad164bac 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -96,7 +96,7 @@ export default function App() { -Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) to minimize re-renders for them. +Note that using this hook triggers a re-render for the component when the screen it's in changes focus. This might cause lags during the animation if your component is heavy. You might want to extract the expensive parts to separate components and use [`React.memo`](https://react.dev/reference/react/memo) or [`React.PureComponent`](https://react.dev/reference/react/PureComponent) to minimize re-renders for them. ## Using with class component From 67a6f52c8cf303d1bc296e2ee335d2395cbdaf64 Mon Sep 17 00:00:00 2001 From: stanleyoos Date: Wed, 14 Aug 2024 08:10:47 +0200 Subject: [PATCH 6/6] docs: Deleted unnecessary comment --- versioned_docs/version-6.x/getting-started.md | 2 +- versioned_docs/version-7.x/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/versioned_docs/version-6.x/getting-started.md b/versioned_docs/version-6.x/getting-started.md index ff66c4c1d29..efd49384dd2 100755 --- a/versioned_docs/version-6.x/getting-started.md +++ b/versioned_docs/version-6.x/getting-started.md @@ -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](https://reactnative.dev/docs/getting-started) (Sections 1 to 4) +1. [React Native](https://reactnative.dev/docs/getting-started) 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) diff --git a/versioned_docs/version-7.x/getting-started.md b/versioned_docs/version-7.x/getting-started.md index 540e76a8278..32907b57bdd 100755 --- a/versioned_docs/version-7.x/getting-started.md +++ b/versioned_docs/version-7.x/getting-started.md @@ -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](https://reactnative.dev/docs/getting-started) (Sections 1 to 4) +1. [React Native](https://reactnative.dev/docs/getting-started) 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)