Merge branch 'main' into @eds2002/screen-transitions-blog

Author: satya164

src/__tests__/process-markdown.test.ts

@@ -146,7 +146,7 @@ describe('processMarkdown', () => {
 
     const { content: result } = await processMarkdown(input);
 
-    assert.ok(result.includes('**Static:**'));
+    assert.ok(result.includes('**Static (Recommended):**'));
     assert.ok(result.includes('**Dynamic:**'));
     assert.ok(result.includes('NavigationContainer'));
     assert.ok(!result.includes('static2dynamic'));

src/plugins/process-markdown.ts

@@ -293,7 +293,7 @@ async function transformStatic2Dynamic(content: string): Promise<string> {
         const langTag = m.lang || 'js';
         const metaSuffix = cleanMeta ? ` ${cleanMeta}` : '';
 
-        const staticSection = `**Static:**\n\n\`\`\`${langTag}${metaSuffix}\n${m.code}\`\`\``;
+        const staticSection = `**Static (Recommended):**\n\n\`\`\`${langTag}${metaSuffix}\n${m.code}\`\`\``;
         const dynamicSection = `**Dynamic:**\n\n\`\`\`${langTag}${metaSuffix}\n${dynamicCode}\n\`\`\``;
 
         return {

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -752,6 +752,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](tab-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The bottom tab navigator exports the following hooks:

versioned_docs/version-7.x/deep-linking.md

@@ -14,7 +14,7 @@ This guide will describe how to configure your app to handle deep links on vario
 
 React Native provides a [`Linking`](https://reactnative.dev/docs/linking) to get notified of incoming links. React Navigation can integrate with the `Linking` module to automatically handle deep links. On Web, React Navigation can integrate with browser's `history` API to handle URLs on client side. See [configuring links](configuring-links.md) to see more details on how to configure links in React Navigation.
 
-While you don't need to use the `linking` prop from React Navigation, and can handle deep links yourself by using the `Linking` API and navigating from there, it'll be significantly more complicated than using the `linking` prop which handles many edge cases for you. So we don't recommend implementing it by yourself.
+We don't recommend handling deep links yourself using a [`ref`](navigation-container.md#ref) as it can be error-prone and significantly more complicated. Using the `linking` prop is the recommended way to handle deep links in React Navigation.
 
 Below, we'll go through required configurations so that the deep link integration works.
 

versioned_docs/version-7.x/drawer-actions.md

@@ -9,6 +9,8 @@ import TabItem from '@theme/TabItem';
 
 `DrawerActions` is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in [CommonActions](navigation-actions.md).
 
+For screens inside a [Drawer Navigator](drawer-navigator.md), drawer actions are available as methods on the `navigation` object.
+
 The following actions are supported:
 
 ## openDrawer
@@ -34,7 +36,7 @@ function HomeScreen() {
       <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.openDrawer());
+          navigation.openDrawer();
           // codeblock-focus-end
         }}
       >
@@ -57,6 +59,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.openDrawer());
+```
+
 ## closeDrawer
 
 The `closeDrawer` action can be used to close the drawer pane.
@@ -68,7 +78,6 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -83,9 +92,7 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home!</Text>
-      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
-        Open Drawer
-      </Button>
+      <Button onPress={() => navigation.openDrawer()}>Open Drawer</Button>
     </View>
   );
 }
@@ -100,7 +107,7 @@ function CustomDrawerContent(props) {
         label="Close drawer"
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.closeDrawer());
+          navigation.closeDrawer();
           // codeblock-focus-end
         }}
       />
@@ -122,6 +129,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.closeDrawer());
+```
+
 ## toggleDrawer
 
 The `toggleDrawer` action can be used to toggle the drawer pane.
@@ -133,48 +148,29 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerContentScrollView,
-  DrawerItemList,
-  DrawerItem,
-} from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home!</Text>
-      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
-        Toggle Drawer
-      </Button>
-    </View>
-  );
-}
-
-function CustomDrawerContent(props) {
-  const { navigation } = props;
-
-  return (
-    <DrawerContentScrollView {...props}>
-      <DrawerItemList {...props} />
-      <DrawerItem
-        label="Toggle drawer"
+      <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.toggleDrawer());
+          navigation.toggleDrawer();
           // codeblock-focus-end
         }}
-      />
-    </DrawerContentScrollView>
+      >
+        Toggle Drawer
+      </Button>
+    </View>
   );
 }
 
 const MyDrawer = createDrawerNavigator({
-  drawerContent: (props) => <CustomDrawerContent {...props} />,
   screens: {
     Home: HomeScreen,
   },
@@ -187,6 +183,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.toggleDrawer());
+```
+
 ## jumpTo
 
 The `jumpTo` action can be used to jump to an existing route in the drawer navigator.
@@ -201,7 +205,6 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
@@ -214,9 +217,7 @@ function HomeScreen() {
       <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(
-            DrawerActions.jumpTo('Profile', { user: 'Satya' })
-          );
+          navigation.jumpTo('Profile', { user: 'Satya' });
           // codeblock-focus-end
         }}
       >
@@ -250,3 +251,11 @@ export default function App() {
   return <Navigation />;
 }
 ```
+
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.jumpTo('Profile', { user: 'Satya' }));
+```

versioned_docs/version-7.x/drawer-navigator.md

@@ -749,6 +749,8 @@ export default function App() {
 }
 ```
 
+See [`openDrawer`](drawer-actions.md#opendrawer) for more details.
+
 #### `closeDrawer`
 
 Closes the drawer pane.
@@ -757,6 +759,8 @@ Closes the drawer pane.
 navigation.closeDrawer();
 ```
 
+See [`closeDrawer`](drawer-actions.md#closedrawer) for more details.
+
 #### `toggleDrawer`
 
 Opens the drawer pane if closed, closes the drawer pane if opened.
@@ -765,6 +769,8 @@ Opens the drawer pane if closed, closes the drawer pane if opened.
 navigation.toggleDrawer();
 ```
 
+See [`toggleDrawer`](drawer-actions.md#toggledrawer) for more details.
+
 #### `jumpTo`
 
 Navigates to an existing screen in the drawer navigator. The method accepts the following arguments:
@@ -827,6 +833,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](drawer-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The drawer navigator exports the following hooks:

versioned_docs/version-7.x/getting-started.md

@@ -7,26 +7,7 @@ sidebar_label: Getting started
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-The _Fundamentals_ section covers the most important aspects of React Navigation. It should be enough to build a typical mobile application and give you the background to dive deeper into the more advanced topics.
-
-<details>
-<summary>Prior knowledge</summary>
-
-If you're already familiar with JavaScript, React and React Native, you'll be able to get moving with React Navigation quickly! If not, we recommend gaining some basic knowledge first, then coming back here when you're done.
-
-1. [React Documentation](https://react.dev/learn)
-2. [React Native Documentation](https://reactnative.dev/docs/getting-started)
-
-</details>
-
-<details>
-<summary>Minimum requirements</summary>
-
-- `react-native` >= 0.72.0
-- `expo` >= 52 (if you use [Expo Go](https://expo.dev/go))
-- `typescript` >= 5.0.0 (if you use TypeScript)
-
-</details>
+React Navigation is a navigation library for React Native and Web. It provides routing logic and UI common on mobile apps and PWAs with type-safe navigation, built-in universal links on mobile, and browser history integration on the web.
 
 ## Starter template
 
@@ -48,6 +29,15 @@ In your project directory, run:
 npm install @react-navigation/native
 ```
 
+<details>
+<summary>Minimum requirements</summary>
+
+- `react-native` >= 0.72.0
+- `expo` >= 52 (if you use [Expo Go](https://expo.dev/go))
+- `typescript` >= 5.0.0 (if you use TypeScript)
+
+</details>
+
 ### Installing dependencies
 
 Next, install the dependencies used by most navigators: [`react-native-screens`](https://github.com/software-mansion/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
@@ -160,6 +150,8 @@ In `AndroidManifest.xml`, set `android:enableOnBackInvokedCallback` to `false` i
 
 ## Setting up React Navigation
 
+The guides linked below cover the fundamentals of React Navigation, and give you the background to dive deeper into the more advanced topics.
+
 When using React Navigation, you configure [**navigators**](glossary-of-terms.md#navigator) in your app. Navigators handle transitions between screens and provide UI such as headers, tab bars, etc.
 
 There are 2 ways to configure navigators:
@@ -172,6 +164,6 @@ There are 2 ways to configure navigators:
 
 - **[Dynamic configuration](hello-react-navigation.md?config=dynamic)**
 
-  Component-based configuration with significantly more boilerplate. Supports dynamic screen lists and navigator options.
+  Component-based configuration with significantly more boilerplate for TypeScript and deep linking. Supports dynamic screen lists and navigator options.
 
 </div>

versioned_docs/version-7.x/material-top-tab-navigator.md

@@ -659,6 +659,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](tab-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The material top tab navigator exports the following hooks:

versioned_docs/version-7.x/native-stack-navigator.md

@@ -1313,6 +1313,8 @@ Replaces the current screen with a new screen in the stack. The method accepts t
 navigation.replace('Profile', { owner: 'Michaś' });
 ```
 
+See [`replace`](stack-actions.md#replace) for more details.
+
 #### `push`
 
 Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:
@@ -1324,6 +1326,8 @@ Pushes a new screen to the top of the stack and navigate to it. The method accep
 navigation.push('Profile', { owner: 'Michaś' });
 ```
 
+See [`push`](stack-actions.md#push) for more details.
+
 #### `pop`
 
 Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (`count`), which allows you to specify how many screens to pop back by.
@@ -1332,6 +1336,8 @@ Pops the current screen from the stack and navigates back to the previous screen
 navigation.pop();
 ```
 
+See [`pop`](stack-actions.md#pop) for more details.
+
 #### `popTo`
 
 Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:
@@ -1347,6 +1353,8 @@ If a matching screen is not found in the stack, this will pop the current screen
 navigation.popTo('Profile', { owner: 'Michaś' });
 ```
 
+See [`popTo`](stack-actions.md#popto) for more details.
+
 #### `popToTop`
 
 Pops all of the screens in the stack except the first one and navigates to it.
@@ -1355,6 +1363,8 @@ Pops all of the screens in the stack except the first one and navigates to it.
 navigation.popToTop();
 ```
 
+See [`popToTop`](stack-actions.md#poptotop) for more details.
+
 ### Hooks
 
 The native stack navigator exports the following hooks: