Fix broken anchor links

Author: satya164

blog/2020-02-06-react-navigation-5.0.md

@@ -53,7 +53,7 @@ Hooks are great for stateful logic and code organization. Now we have several ho
 
 ### Update options from component
 
-We’ve added a new [`setOptions`](/docs/5.x/navigation-prop#setoptions---update-screen-options-from-the-component) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen.
+We’ve added a new [`setOptions`](/docs/5.x/navigation-prop#setoptions) method on the `navigation` prop to make configuring screen navigation options more intuitive than its `static navigationOptions` predecessor. It lets us **easily set screen options based on props, state or context without messing with params**. Instead of using static options, we can call it anytime to configure the screen.
 
 ```js
 navigation.setOptions({

docusaurus.config.js

@@ -12,6 +12,8 @@ export default {
   favicon: 'img/favicon.ico',
   organizationName: 'react-navigation',
   projectName: 'react-navigation.github.io',
+  onBrokenAnchors: 'throw',
+  onBrokenMarkdownLinks: 'throw',
   scripts: ['/js/snack-helpers.js', '/js/toc-fixes.js'],
   themeConfig: {
     colorMode: {

static/js/snack-helpers.js

@@ -184,24 +184,11 @@ function appendSnackLink() {
   });
 }
 
-// This is used to update links like the following:
-// [Full source of what we have built so far](#example/full-screen-modal)
-function transformExistingSnackLinks() {
-  document.querySelectorAll('a[href*="#example/"]').forEach((a) => {
-    let urlParts = a.href.split('#example/');
-    let templateId = urlParts[urlParts.length - 1];
-    a.href = getSnackUrl({ templateId });
-    a.target = '_blank';
-  });
-}
-
 function initializeSnackObservers() {
   appendSnackLink();
-  transformExistingSnackLinks();
 
   const mutationObserver = new MutationObserver((mutations) => {
     mutations.forEach(appendSnackLink);
-    mutations.forEach(transformExistingSnackLinks);
   });
 
   mutationObserver.observe(document.documentElement, {

versioned_docs/version-1.x/navigation-actions.md

@@ -13,15 +13,15 @@ The following actions are supported:
 - [Navigate](#navigate) - Navigate to another route
 - [Back](#back) - Go back to previous state
 - [Set Params](#setparams) - Set Params for given route
-- [Init](#init) - Used to initialize first state if state is undefined
+- Init - Used to initialize first state if state is undefined
 
 Within a stack, you can also use:
 
 - [Reset](#reset) - Replace current state with a new state
 - [Replace](#replace) - Replace a route at a given key with another route
-- [Push](#push) - Add a route on the top of the stack, and navigate forward to it
-- [Pop](#pop) - Navigate back to previous routes
-- [PopToTop](#poptotop) - Navigate to the top route of the stack, dismissing all other routes
+- Push - Add a route on the top of the stack, and navigate forward to it
+- Pop - Navigate back to previous routes
+- PopToTop - Navigate to the top route of the stack, dismissing all other routes
 
 The action creator functions define `toString()` to return the action type, which enables easy usage with third-party Redux libraries, including redux-actions and redux-saga.
 

versioned_docs/version-1.x/navigation-options.md

@@ -102,5 +102,5 @@ List of available navigation options depends on the `navigator` the screen is ad
 Check available options for:
 
 - [`drawer navigator`](drawer-navigator.md#screen-navigation-options)
-- [`stack navigator`](stack-navigator.md#screen-navigation-options)
-- [`tab navigator`](tab-navigator.md#screen-navigation-options)
+- [`stack navigator`](stack-navigator.md#navigationoptions-used-by-stacknavigator)
+- [`tab navigator`](tab-navigator.md#navigationoptions-used-by-tabnavigator)

versioned_docs/version-1.x/redux-integration.md

@@ -14,7 +14,7 @@ _You probably do not need to do this!_ Storing your React Navigation state in yo
 
 1. To handle your app's navigation state in Redux, you can pass your own `navigation` prop to a navigator.
 
-2. Once you pass your own navigation prop to the navigator, the default [`navigation`](navigation-prop.md) prop gets destroyed. You must construct your own `navigation` prop with [`state`](navigation-prop.md#state-the-screen-s-current-state-route), [`dispatch`](navigation-prop.md#dispatch-send-an-action-to-the-router), and `addListener` properties.
+2. Once you pass your own navigation prop to the navigator, the default [`navigation`](navigation-prop.md) prop gets destroyed. You must construct your own `navigation` prop with [`state`](navigation-prop.md#state---the-screens-current-stateroute), [`dispatch`](navigation-prop.md#dispatch---send-an-action-to-the-router), and `addListener` properties.
 
 3. The `state` will be fed from the reducer assigned to handle navigation state and the `dispatch` will be Redux's default `dispatch`. Thus you will be able to dispatch normal redux actions using `this.props.navigation.dispatch(ACTION)`, reducer will update the navigation state on the basis of dispatched action, the new navigation state will then be passed to the navigator.
 

versioned_docs/version-2.x/custom-android-back-button-handling.md

@@ -8,7 +8,7 @@ By default, when user presses the Android hardware back button, react-navigation
 
 > If you're looking for an easy-to-use solution, you can check out a community-developed package [react-navigation-backhandler](https://github.com/vonovak/react-navigation-backhandler). The following text shows what the package does under the cover.
 
-As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native and we [subscribe to navigation lifecycle updates](navigation-prop.md#addlistener-subscribe-to-updates-to-navigation-lifecycle) to add our custom `hardwareBackPress` listener.
+As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native and we [subscribe to navigation lifecycle updates](navigation-prop.md#addlistener---subscribe-to-updates-to-navigation-lifecycle) to add our custom `hardwareBackPress` listener.
 
 Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
 

versioned_docs/version-2.x/custom-navigator-overview.md

@@ -24,7 +24,7 @@ The navigators render application screens which are just React components.
 To learn how to create screens, read about:
 
 - [Screen `navigation` prop](navigation-prop.md) to allow the screen to dispatch navigation actions, such as opening another screen
-- Screen `navigationOptions` to customize how the screen gets presented by the navigator (e.g. [header title](stack-navigator.md#navigationoptions-used-by-stacknavigator), tab label)
+- Screen `navigationOptions` to customize how the screen gets presented by the navigator (e.g. [header title](stack-navigator.md#navigationoptions-for-screens-inside-of-the-navigator), tab label)
 
 ### Calling Navigate on Top Level Component
 

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

@@ -8,9 +8,9 @@ sidebar_label: DrawerActions
 
 The following actions are supported:
 
-- [openDrawer](#openDrawer) - open the drawer
-- [closeDrawer](#closeDrawer) - close the drawer
-- [toggleDrawer](#toggleDrawer) - toggle the state, ie. switch from closed to open and vice versa
+- openDrawer - open the drawer
+- closeDrawer - close the drawer
+- toggleDrawer - toggle the state, ie. switch from closed to open and vice versa
 
 ### Usage
 

versioned_docs/version-2.x/headers.md

@@ -202,11 +202,11 @@ class HomeScreen extends React.Component {
 
 ## Additional configuration
 
-You can read the full list of available `navigationOptions` for screens inside of a stack navigator in the [`createStackNavigator` reference](stack-navigator.md#navigationoptions-used-by-stacknavigator).
+You can read the full list of available `navigationOptions` for screens inside of a stack navigator in the [`createStackNavigator` reference](stack-navigator.md#navigationoptions-for-screens-inside-of-the-navigator).
 
 ## Summary
 
-- You can customize the header inside of the `navigationOptions` static property on your screen components. Read the full list of options [in the API reference](stack-navigator.md#navigationoptions-used-by-stacknavigator).
+- You can customize the header inside of the `navigationOptions` static property on your screen components. Read the full list of options [in the API reference](stack-navigator.md#navigationoptions-for-screens-inside-of-the-navigator).
 - The `navigationOptions` static property can be an object or a function. When it is a function, it is provided with an object with the `navigation` prop, `screenProps`, and `navigationOptions` on it.
 - You can also specify shared `navigationOptions` in the stack navigator configuration when you initialize it. The static property takes precedence over that configuration.
 - [Full source of what we have built so far](https://snack.expo.io/@react-navigation/custom-header-title-component-v2).

versioned_docs/version-2.x/navigation-actions.md

@@ -13,7 +13,6 @@ The following actions are supported:
 - [Navigate](#navigate) - Navigate to another route
 - [Back](#back) - Go back to previous state
 - [Set Params](#setparams) - Set Params for given route
-- [Init](#init) - Used to initialize first state if state is undefined
 
 For actions specific to a StackNavigator, see [StackActions](stack-actions.md).
 

versioned_docs/version-2.x/navigation-events.md

@@ -14,7 +14,7 @@ sidebar_label: NavigationEvents
 - `onWillBlur` - event listener
 - `onDidBlur` - event listener
 
-The event listener is the same as the imperative [`navigation.addListener(...)`](navigation-prop.md#addlistener-subscribe-to-updates-to-navigation-lifecycle) API.
+The event listener is the same as the imperative [`navigation.addListener(...)`](navigation-prop.md#addlistener---subscribe-to-updates-to-navigation-lifecycle) API.
 
 ### Example
 

versioned_docs/version-2.x/navigation-key.md

@@ -17,14 +17,14 @@ If, however, you want to push several instances of the same route, you can do so
 
 > Note: the behavior of `navigate` without a `key` is significantly different in the 1.x series of releases. Read more about it [here](https://gist.github.com/vonovak/ef72f5efe1d36742de8968ff6a708985).
 
-### Usage with [`reset`](navigation-actions.md#reset)
+### Usage with [`reset`](stack-actions.md#reset)
 
 When resetting, `key` is also optional and can be a string or `null`. If set, the navigator with the given key will reset. If `null`, the root navigator will reset. You can obtain a route's navigator key by calling `this.props.navigation.dangerouslyGetParent().state.key`. Reason why the function is called `dangerouslyGetParent` is to warn developers against overusing it to eg. get parent of parent and other hard-to-follow patterns.
 
-### Usage with [`replace`](navigation-actions.md#replace)
+### Usage with [`replace`](stack-actions.md#replace)
 
 With the `replace` navigation action, `key` is a required parameter used for identifying the route to be replaced. If you use the helper function `this.props.navigation.replace`, we will automatically substitute the key of the current route.
 
 ### Usage with `goBack`
 
-Please refer to the [`goBack docs`](navigation-prop.md#goback-close-the-active-screen-and-move-back) for a detailed explanation.
+Please refer to the [`goBack docs`](navigation-prop.md#goback---close-the-active-screen-and-move-back) for a detailed explanation.

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

@@ -41,7 +41,7 @@ We start on the `HomeScreen` and navigate to `DetailsScreen`. Then we use the ta
 
 Now that we understand how React lifecycle methods work in React Navigation, let's answer the question we asked at the beginning: "How do we find out that a user is leaving it or coming back to it?"
 
-React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: `willFocus`, `willBlur`, `didFocus` and `didBlur`. Read more about them in the [API reference](navigation-prop.md#addlistener-subscribe-to-updates-to-navigation-lifecycle).
+React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: `willFocus`, `willBlur`, `didFocus` and `didBlur`. Read more about them in the [API reference](navigation-prop.md#addlistener---subscribe-to-updates-to-navigation-lifecycle).
 
 Many of your use cases may be covered with the [`withNavigationFocus` HOC](with-navigation-focus.md) or the [`<NavigationEvents />` component](navigation-events.md) which are a little more straightforward to use.
 

versioned_docs/version-2.x/navigation-options-resolution.md

@@ -108,7 +108,7 @@ HomeStack.navigationOptions = {
 
 We understand that overloading the naming here is a little bit confusing. Please [open a RFC](https://github.com/react-navigation/rfcs) if you have a suggestion about how we can make this API easier to learn and work with.
 
-# A stack contains a tab navigator and you want to set the title on the stack header
+## A stack contains a tab navigator and you want to set the title on the stack header
 
 Imagine the following configuration:
 
@@ -177,7 +177,7 @@ Using this configuration, the `headerTitle` or `title` from `navigationOptions`
 
 Additionally, you can push new screens to the feed and profile stacks without hiding the tab bar by adding more routes to those stacks. If you want to push screens on top of the tab bar, then you can add them to the `AppNavigator` stack.
 
-# A tab navigator contains a stack and you want to hide the tab bar on specific screens
+## A tab navigator contains a stack and you want to hide the tab bar on specific screens
 
 Similar to the example above where a stack contains a tab navigator, we can solve this in two ways: add `navigationOptions` to our tab navigator to set the tab bar to hidden depending on which route is active in the child stack, or we can move the tab navigator inside of the stack.
 
@@ -247,7 +247,7 @@ const AppNavigator = createSwitchNavigator({
 });
 ```
 
-# A drawer has a stack inside of it and you want to lock the drawer on certain screens
+## A drawer has a stack inside of it and you want to lock the drawer on certain screens
 
 This is conceptually identical to having a tab with a stack inside of it (read that above if you have not already), where you want to hide the tab bar on certain screens. The only difference is that rather than using `tabBarVisible` you will use `drawerLockMode`.
 

versioned_docs/version-3.x/MST-integration.md

@@ -61,7 +61,7 @@ export const NavigationStore = types
   }));
 ```
 
-Note that `userProfileScreenParams` is a simple model with a `user` entry, while `productDetailScreenParams` is a map of `ProductDetailScreenParams` model. The reason we chose this shape of data is that we only have a single user profile screen in our app which reads its params from `userProfileScreenParams`. `productDetailScreenParams` is a map because the app can have several product screens on a stack. Each screen points to a `Product` instance saved in the map. The keys into the map are the React Navigation [keys](navigation-key.md#usage-with-the-navigate-navigation-actionshtml-navigate-call): think of the `key` as of an identifier of the route.
+Note that `userProfileScreenParams` is a simple model with a `user` entry, while `productDetailScreenParams` is a map of `ProductDetailScreenParams` model. The reason we chose this shape of data is that we only have a single user profile screen in our app which reads its params from `userProfileScreenParams`. `productDetailScreenParams` is a map because the app can have several product screens on a stack. Each screen points to a `Product` instance saved in the map. The keys into the map are the React Navigation [keys](navigation-key.md#usage-with-the-navigate-call): think of the `key` as of an identifier of the route.
 
 Your navigation store may also be just one map where for each screen (regardless if it is a product or user profile screen), we store its navigation params. This is the approach taken in the [sample app](https://github.com/vonovak/react-navigation-mst-demo).
 

versioned_docs/version-3.x/custom-android-back-button-handling.md

@@ -8,7 +8,7 @@ By default, when user presses the Android hardware back button, react-navigation
 
 > If you're looking for an easy-to-use solution, you can check out a community-developed package [react-navigation-backhandler](https://github.com/vonovak/react-navigation-backhandler). The following text shows what the package does under the cover.
 
-As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native and we [subscribe to navigation lifecycle updates](navigation-prop.md#addlistener-subscribe-to-updates-to-navigation-lifecycle) to add our custom `hardwareBackPress` listener.
+As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of [`BackHandler`](https://reactnative.dev/docs/backhandler.html) which comes with react-native and we [subscribe to navigation lifecycle updates](navigation-prop.md#addlistener---subscribe-to-updates-to-navigation-lifecycle) to add our custom `hardwareBackPress` listener.
 
 Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
 

versioned_docs/version-3.x/custom-navigator-overview.md

@@ -24,4 +24,4 @@ The navigators render application screens which are just React components.
 To learn how to create screens, read about:
 
 - [Screen `navigation` prop](navigation-prop.md) to allow the screen to dispatch navigation actions, such as opening another screen
-- Screen `navigationOptions` to customize how the screen gets presented by the navigator (e.g. [header title](stack-navigator.md#navigationoptions-used-by-stacknavigator), tab label)
+- Screen `navigationOptions` to customize how the screen gets presented by the navigator (e.g. [header title](stack-navigator.md#navigationoptions-for-screens-inside-of-the-navigator), tab label)

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

@@ -8,9 +8,9 @@ sidebar_label: DrawerActions
 
 The following actions are supported:
 
-- [openDrawer](#openDrawer) - open the drawer
-- [closeDrawer](#closeDrawer) - close the drawer
-- [toggleDrawer](#toggleDrawer) - toggle the state, ie. switch from closed to open and vice versa
+- openDrawer - open the drawer
+- closeDrawer - close the drawer
+- toggleDrawer - toggle the state, ie. switch from closed to open and vice versa
 
 ### Usage