Add links to summaries

Author: satya164

versioned_docs/version-7.x/handling-safe-area.md

@@ -473,6 +473,6 @@ Similarly, you could apply these paddings in `contentContainerStyle` of `FlatLis
 
 ## Summary
 
-- Use `useSafeAreaInsets` hook from `react-native-safe-area-context` instead of `SafeAreaView` component
+- Use [`useSafeAreaInsets`](https://appandflow.github.io/react-native-safe-area-context/api/use-safe-area-insets) hook from `react-native-safe-area-context` instead of [`SafeAreaView`](https://reactnative.dev/docs/safeareaview) component
 - Don't wrap your whole app in `SafeAreaView`, instead apply the styles to content inside your screens
 - Apply only specific insets using the `useSafeAreaInsets` hook for more control

versioned_docs/version-7.x/header-buttons.md

@@ -297,6 +297,6 @@ Generally, this is what you want. But it's possible that in some circumstances t
 
 ## Summary
 
-- You can set buttons in the header through the `headerLeft` and `headerRight` properties in `options`.
-- The back button is fully customizable with `headerLeft`, but if you just want to change the title or image, there are other `options` for that — `headerBackTitle`, `headerBackTitleStyle`, and `headerBackImageSource`.
-- You can use a callback for the options prop to access `navigation` and `route` objects.
+- You can set buttons in the header through the [`headerLeft`](elements.md#headerleft) and [`headerRight`](elements.md#headerright) properties in [`options`](screen-options.md).
+- The back button is fully customizable with `headerLeft`, but if you only want to change the title or image, there are other `options` for that — [`headerBackTitle`](native-stack-navigator.md#headerbacktitle), [`headerBackTitleStyle`](native-stack-navigator.md#headerbacktitlestyle), and [`headerBackImageSource`](native-stack-navigator.md#headerbackimagesource).
+- You can use a callback for the options prop to access [`navigation`](navigation-object.md) and [`route`](route-object.md) objects.

versioned_docs/version-7.x/headers.md

@@ -689,6 +689,6 @@ You can read the full list of available `options` for screens inside of a native
 
 ## Summary
 
-- You can customize the header inside of the `options` property of your screens. Read the full list of options [in the API reference](native-stack-navigator.md#options).
-- The `options` property can be an object or a function. When it is a function, it is provided with an object with the `navigation` and `route` objects.
-- You can also specify shared `screenOptions` in the stack navigator configuration when you initialize it. This will apply to all screens in the navigator.
+- You can customize the header inside of the [`options`](screen-options.md) property of your screens. Read the full list of options [in the API reference](native-stack-navigator.md#options).
+- The `options` property can be an object or a function. When it is a function, it is provided with an object with the [`navigation`](navigation-object.md) and [`route`](route-object.md) objects.
+- You can also specify shared [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator) in the stack navigator configuration when you initialize it. This will apply to all screens in the navigator.

versioned_docs/version-7.x/hello-react-navigation.md

@@ -525,19 +525,19 @@ If you are using TypeScript, you will need to specify the types accordingly. You
 <TabItem value="static" label="Static" default>
 
 - React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
-- `createNativeStackNavigator` is a function that takes the screens configuration and renders our content.
+- [`createNativeStackNavigator`](native-stack-navigator.md) is a function that takes the screens configuration and renders our content.
 - Each property under screens refers to the name of the route, and the value is the component to render for the route.
-- To specify what the initial route in a stack is, provide an `initialRouteName` option for the navigator.
-- To specify screen-specific options, we can specify an `options` property, and for common options, we can specify `screenOptions`.
+- To specify what the initial route in a stack is, provide an [`initialRouteName`](navigator.md#initial-route-name) option for the navigator.
+- To specify screen-specific options, we can specify an [`options`](screen-options.md#options-prop-on-screen) property, and for common options, we can specify [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator).
 
 </TabItem>
 <TabItem value="dynamic" label="Dynamic">
 
 - React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
-- `Stack.Navigator` is a component that takes route configuration as its children with additional props for configuration and renders our content.
-- Each `Stack.Screen` component takes a `name` prop which refers to the name of the route and `component` prop which specifies the component to render for the route. These are the 2 required props.
-- To specify what the initial route in a stack is, provide an `initialRouteName` as the prop for the navigator.
-- To specify screen-specific options, we can pass an `options` prop to `Stack.Screen`, and for common options, we can pass `screenOptions` to `Stack.Navigator`.
+- [`Stack.Navigator`](native-stack-navigator.md) is a component that takes route configuration as its children with additional props for configuration and renders our content.
+- Each [`Stack.Screen`](screen.md) component takes a [`name`](screen.md#name) prop which refers to the name of the route and [`component`](screen.md#component) prop which specifies the component to render for the route. These are the 2 required props.
+- To specify what the initial route in a stack is, provide an [`initialRouteName`](navigator.md#initial-route-name) as the prop for the navigator.
+- To specify screen-specific options, we can pass an [`options`](screen-options.md#options-prop-on-screen) prop to `Stack.Screen`, and for common options, we can pass [`screenOptions`](screen-options.md#screenoptions-prop-on-the-navigator) to `Stack.Navigator`.
 
 </TabItem>
 </Tabs>

versioned_docs/version-7.x/modal.md

@@ -185,7 +185,7 @@ Instead of specifying this option for a group, it's also possible to specify it
 
 ## Summary
 
-- To change the type of transition on a stack navigator you can use the `presentation` option.
+- To change the type of transition on a stack navigator you can use the [`presentation`](native-stack-navigator.md#presentation) option.
 - When `presentation` is set to `modal`, the screens behave like a modal, i.e. they have a bottom to top transition and may show part of the previous screen in the background.
 - Setting `presentation: 'modal'` on a group makes all the screens in the group modals, so to use non-modal transitions on other screens, we add another group with the default configuration.
 

versioned_docs/version-7.x/navigating.md

@@ -358,8 +358,8 @@ export default function App() {
 
 ## Summary
 
-- `navigation.navigate('RouteName')` pushes a new route to the native stack navigator if you're not already on that route.
-- We can call `navigation.push('RouteName')` as many times as we like and it will continue pushing routes.
-- The header bar will automatically show a back button, but you can programmatically go back by calling `navigation.goBack()`. On Android, the hardware back button just works as expected.
-- You can go back to an existing screen in the stack with `navigation.popTo('RouteName')`, and you can go back to the first screen in the stack with `navigation.popToTop()`.
-- The `navigation` object is available to all screen components with the [`useNavigation`](use-navigation.md) hook.
+- [`navigation.navigate('RouteName')`](navigation-object.md#navigate) pushes a new route to the native stack navigator if you're not already on that route.
+- We can call [`navigation.push('RouteName')`](stack-actions.md#push) as many times as we like and it will continue pushing routes.
+- The header bar will automatically show a back button, but you can programmatically go back by calling [`navigation.goBack()`](navigation-object.md#goback). On Android, the hardware back button just works as expected.
+- You can go back to an existing screen in the stack with [`navigation.popTo('RouteName')`](stack-actions.md#popto), and you can go back to the first screen in the stack with [`navigation.popToTop()`](stack-actions.md#poptotop).
+- The [`navigation`](navigation-object.md) object is available to all screen components with the [`useNavigation`](use-navigation.md) hook.

versioned_docs/version-7.x/navigation-lifecycle.md

@@ -627,6 +627,6 @@ If you want to know if the screen is focused or not inside of an event listener,
 ## Summary
 
 - React Navigation does not unmount screens when navigating away from them
-- The `useFocusEffect` hook is analogous to React's `useEffect` but is tied to the navigation lifecycle instead of the component lifecycle.
-- The `useIsFocused` hook and `navigation.isFocused` method can be used to determine if a screen is currently focused.
-- React Navigation emits `focus` and `blur` events that can be listened to when a screen comes into focus or goes out of focus.
+- The [`useFocusEffect`](use-focus-effect.md) hook is analogous to React's [`useEffect`](https://react.dev/reference/react/useEffect) but is tied to the navigation lifecycle instead of the component lifecycle.
+- The [`useIsFocused`](use-is-focused.md) hook and [`navigation.isFocused()`](navigation-object.md#isfocused) method can be used to determine if a screen is currently focused.
+- React Navigation emits [`focus`](navigation-events.md#focus) and [`blur`](navigation-events.md#blur) events that can be listened to when a screen comes into focus or goes out of focus.

versioned_docs/version-7.x/params.md

@@ -373,7 +373,7 @@ export default function App() {
 
 See [Nesting navigators](nesting-navigators.md) for more details on nesting.
 
-:::warning
+## Reserved param names
 
 Some param names are reserved by React Navigation as part of the API for nested navigators. The list of the reserved param names are as follows:
 
@@ -384,8 +384,6 @@ Some param names are reserved by React Navigation as part of the API for nested
 
 You should avoid using these param names in your code unless navigating to a screen containing a nested navigator. Otherwise it will result in unexpected behavior, such as the screen not being able to access the params you passed. If you need to pass data to a nested screen, use a different names for the param.
 
-:::
-
 ## What should be in params
 
 Params are essentially options for a screen. They should contain the minimal data required to show a screen, nothing more. If the data is used by multiple screens, it should be in a global store or global cache. Params is not designed for state management.
@@ -436,8 +434,9 @@ In essence, pass the least amount of data required to identify a screen in param
 
 ## Summary
 
-- `navigate` and `push` accept an optional second argument to let you pass parameters to the route you are navigating to. For example: `navigation.navigate('RouteName', { paramName: 'value' })`.
-- You can read the params through `route.params` inside a screen
-- You can update the screen's params with `navigation.setParams`
-- Initial params can be passed via the `initialParams` prop on `Screen`
+- [`navigate`](navigation-actions.md#navigate) and [`push`](stack-actions.md#push) accept an optional second argument to let you pass parameters to the route you are navigating to. For example: `navigation.navigate('RouteName', { paramName: 'value' })`.
+- You can read the params through [`route.params`](route-object.md) inside a screen
+- You can update the screen's params with [`navigation.setParams`](navigation-object.md#setparams) or [`navigation.replaceParams`](navigation-object.md#replaceparams)
+- Initial params can be passed via the [`initialParams`](screen.md#initial-params) prop on `Screen` or in the navigator config
 - Params should contain the minimal data required to show a screen, nothing more
+- Some [param names are reserved](#reserved-param-names) by React Navigation and should be avoided