Fix asset links

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

@@ -97,15 +97,15 @@ const MyTheme = {
 
 The new version has been written from the ground-up with TypeScript. We now get first class autocompletion and type-checking.
 
-![TypeScript in action](assets/announcing-5.0/typescript.gif)
+![TypeScript in action](/blog/assets/announcing-5.0/typescript.gif)
 
 We also have JSDoc for the built-in methods and options, so you get their description directly in your editor. See [our typescript documentation](https://reactnavigation.org/docs/typescript.html) for more details on how to use it.
 
 ### Redux DevTools integration
 
 If you use [React Native Debugger](https://github.com/jhen0409/react-native-debugger) or [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension), you can see navigation actions in the devtools along with the current navigation state. It also supports time-travel debugging!
 
-![Redux Devtools in action](assets/announcing-5.0/redux-devtools.gif)
+![Redux Devtools in action](/blog/assets/announcing-5.0/redux-devtools.gif)
 
 You don't need to use Redux in your apps for this to work and it works without any extra setup!
 

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

@@ -43,7 +43,7 @@ You need to specify a scheme for your app. You can register for a scheme in your
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = StackNavigator({...});
@@ -86,7 +86,7 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = StackNavigator({...}));
@@ -117,7 +117,7 @@ In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
 
 In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the URL scheme to your desired URL scheme.
 
-![Xcode project info URL types with mychat added](/docs/assets/deep-linking/xcode-linking.png)
+![Xcode project info URL types with mychat added](/assets/deep-linking/xcode-linking.png)
 
 Now you can press play in Xcode, or re-build on the command line:
 
@@ -153,7 +153,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
-        <data android:scheme="mychat" />            
+        <data android:scheme="mychat" />
     </intent-filter>
 </activity>
 ```

versioned_docs/version-1.x/modal.md

@@ -85,7 +85,7 @@ const RootStack = StackNavigator(
 There are some important things to notice here:
 
 - As we know, the `StackNavigator` function returns a React component (remember we render `<RootStack />` in our `App` component). This same component can be used as a screen component! By doing this, we are nesting a `StackNavigator` inside of another `StackNavigator`. In this case, this is useful for us because we want to use a different transition style for the modal, and we want to disable the header across the entire stack. In the future this will be important because for tab navigation, for example, each tab will likely have its own stack! Intuitively, this is what you expect: when you are on tab A and switch to tab B, you would like tab A to maintain its navigation state as you continue to explore tab B. Look at this diagram to visualize the structure of navigation in this example:
-  ![tree diagram](/docs/assets/modal/tree.png)
+  ![tree diagram](/assets/modal/tree.png)
 - The `mode` configuration for `StackNavigator` can be either `card` (default) or `modal`. The `modal` behavior slides the screen in the from the bottom on iOS and allows the user to scope down from the top to dismiss it. The `modal` configuration has no effect on Android because full-screen modals don't have any different transition behavior on the platform.
 - When we call `navigate` we don't have to specify anything except the route that we'd like to navigate to. There is no need to qualify which stack it belongs to (the arbitrarily named 'root' or the 'main' stack) &mdash; React Navigation attempts to find the route on the closest navigator and then performs the action there. To visualize this, look again at the above tree diagram and imagine the `navigate` action flowing up from `HomeScreen` to `MainStack`, we know that `MainStack` can't handle the route `MyModal`, so it then flows it up to `RootStack`, which can handle that route and so it does.
 

versioned_docs/version-2.x/custom-routers.md

@@ -24,7 +24,7 @@ class MyNavigator extends React.Component {
 }
 ```
 
-![Routers manage the relationship between URIs, actions, and navigation state](/docs/assets/routers/routers-concept-map.png)
+![Routers manage the relationship between URIs, actions, and navigation state](/assets/routers/routers-concept-map.png)
 
 
 ### `getStateForAction(action, state)`

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

@@ -116,7 +116,7 @@ In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
 
 In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the URL scheme to your desired URL scheme.
 
-![Xcode project info URL types with mychat added](/docs/assets/deep-linking/xcode-linking.png)
+![Xcode project info URL types with mychat added](/assets/deep-linking/xcode-linking.png)
 
 Now you can press play in Xcode, or re-build on the command line:
 

versioned_docs/version-2.x/handling-iphonex.md

@@ -8,7 +8,7 @@ By default, React Navigation aids in ensuring your application displays correctl
 
 ## Hidden/Custom Navigation Bar or Tab Bar
 
-![Default React Navigation Behavior](/docs/assets/iphoneX/01-iphonex-default.png)
+![Default React Navigation Behavior](/assets/iphoneX/01-iphonex-default.png)
 
 However, if you're overriding the default navigation bar, it's important to ensure your UI doesn't interfere with either of those hardware elements.
 
@@ -28,7 +28,7 @@ export default createStackNavigator({
 });
 ```
 
-![Text hidden by iPhoneX UI elements](/docs/assets/iphoneX/02-iphonex-content-hidden.png)
+![Text hidden by iPhoneX UI elements](/assets/iphoneX/02-iphonex-content-hidden.png)
 
 To fix this issue you can wrap your content in a `SafeAreaView`, which can be imported from `react-navigation`. Note that `SafeAreaView` should not wrap entire navigators, just the screen components or any content in them.
 
@@ -51,19 +51,19 @@ class MyHomeScreen extends Component {
 }
 ```
 
-![Content spaced correctly with SafeAreaView](/docs/assets/iphoneX/03-iphonex-content-fixed.png)
+![Content spaced correctly with SafeAreaView](/assets/iphoneX/03-iphonex-content-fixed.png)
 
 This will detect if the app is running on an iPhoneX and, if so, ensure the content isn't hidden behind any hardware elements.
 
 ## Landscape Mode
 
 Even if you're using the default navigation bar and tab bar if your application works in landscape mode it's important to ensure you content isn't hidden behind the sensor cluster.
 
-![App in landscape mode with text hidden](/docs/assets/iphoneX/04-iphonex-landscape-hidden.png)
+![App in landscape mode with text hidden](/assets/iphoneX/04-iphonex-landscape-hidden.png)
 
 To fix this you can, once again, wrap your content in a `SafeAreaView`. This will not conflict with the navigation bar or tab bar's default behavior in portrait mode.
 
-![App in landscape mode with text visible](/docs/assets/iphoneX/05-iphonex-landscape-fixed.png)
+![App in landscape mode with text visible](/assets/iphoneX/05-iphonex-landscape-fixed.png)
 
 In conclusion, use the `SafeAreaView` component on the screens you register with a React Navigation navigator.
 

versioned_docs/version-2.x/material-bottom-tab-navigator.md

@@ -6,7 +6,7 @@ sidebar_label: createMaterialBottomTabNavigator
 
 A material-design themed tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.
 
-<img src="/docs/assets/navigators/bottom-navigation.gif" style={{ width: '420px', maxWidth: '100%' }} />
+<img src="/assets/navigators/bottom-navigation.gif" style={{ width: '420px', maxWidth: '100%' }} />
 
 To use this navigator, you need to install `react-navigation-material-bottom-tabs`
 

versioned_docs/version-2.x/modal.md

@@ -85,9 +85,9 @@ const RootStack = createStackNavigator(
 There are some important things to notice here:
 
 - As we know, the stack navigator function returns a React component (remember we render `<RootStack />` in our `App` component). This same component can be used as a screen component! By doing this, we are nesting a stack navigator inside of another stack navigator. In this case, this is useful for us because we want to use a different transition style for the modal, and we want to disable the header across the entire stack. In the future this will be important because for tab navigation, for example, each tab will likely have its own stack! Intuitively, this is what you expect: when you are on tab A and switch to tab B, you would like tab A to maintain its navigation state as you continue to explore tab B. Look at this diagram to visualize the structure of navigation in this example:
-  ![tree diagram](/docs/assets/modal/tree.png)
+  ![tree diagram](/assets/modal/tree.png)
 - The `mode` configuration for stack navigator can be either `card` (default) or `modal`. The `modal` behavior slides the screen in from the bottom on iOS and allows the user to swipe down from the top to dismiss it. The `modal` configuration has no effect on Android because full-screen modals don't have any different transition behavior on the platform.
-- When we call `navigate` we don't have to specify anything except the route that we'd like to navigate to. There is no need to qualify which stack it belongs to (the arbitrarily named 'root' or the 'main' stack) &mdash; React Navigation attempts to find the route on the closest navigator and then performs the action there. To visualize this, look again at [this diagram](/docs/assets/modal/tree.png) and imagine the `navigate` action flowing up from `HomeScreen` to `MainStack`, we know that `MainStack` can't handle the route `MyModal`, so it then flows it up to `RootStack`, which can handle that route and so it does.
+- When we call `navigate` we don't have to specify anything except the route that we'd like to navigate to. There is no need to qualify which stack it belongs to (the arbitrarily named 'root' or the 'main' stack) &mdash; React Navigation attempts to find the route on the closest navigator and then performs the action there. To visualize this, look again at [this diagram](/assets/modal/tree.png) and imagine the `navigate` action flowing up from `HomeScreen` to `MainStack`, we know that `MainStack` can't handle the route `MyModal`, so it then flows it up to `RootStack`, which can handle that route and so it does.
 
   ## Summary
 

versioned_docs/version-2.x/status-bar.md

@@ -66,7 +66,7 @@ export default createStackNavigator({
 });
 ```
 
-![StackNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-stack-demo.gif)
+![StackNavigator with different StatusBar configs](/assets/statusbar/statusbar-stack-demo.gif)
 
 ```javascript
 export default createDrawerNavigator({
@@ -79,7 +79,7 @@ export default createDrawerNavigator({
 });
 ```
 
-![DrawerNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-drawer-demo.gif)
+![DrawerNavigator with different StatusBar configs](/assets/statusbar/statusbar-drawer-demo.gif)
 
 ## TabNavigator
 
@@ -149,6 +149,6 @@ class Screen2 extends React.Component {
 ```
 
 
-![TabNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-tab-demo.gif)
+![TabNavigator with different StatusBar configs](/assets/statusbar/statusbar-tab-demo.gif)
 
 The code used for these demos is available as a [Snack](https://snack.expo.io/r1iuFP6Ez).

versioned_docs/version-3.x/custom-routers.md

@@ -24,7 +24,7 @@ class MyNavigator extends React.Component {
 }
 ```
 
-![Routers manage the relationship between URIs, actions, and navigation state](/docs/assets/routers/routers-concept-map.png)
+![Routers manage the relationship between URIs, actions, and navigation state](/assets/routers/routers-concept-map.png)
 
 
 ### `getStateForAction(action, state)`

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

@@ -151,7 +151,7 @@ In `SimpleApp/ios/SimpleApp/AppDelegate.m`:
 
 In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the URL scheme to your desired URL scheme.
 
-![Xcode project info URL types with mychat added](/docs/assets/deep-linking/xcode-linking.png)
+![Xcode project info URL types with mychat added](/assets/deep-linking/xcode-linking.png)
 
 Now you can press play in Xcode, or re-build on the command line:
 

versioned_docs/version-3.x/handling-iphonex.md

@@ -10,13 +10,13 @@ The goal is to (a) maximize usage of the screen (b) without hiding content or ma
 
 It's tempting to solve (a) by wrapping your entire app in a container with padding that ensures all content will not be occluded. But in doing so, we waste a bunch of space on the screen, as pictured in the image on the left below. What we ideally want is the image pictured on the right. We can use `SafeAreaView` for this. The rest of this guide gives more information on how to support safe areas in React Navigation.
 
-![](/docs/assets/iphoneX/00-intro.png)
+![](/assets/iphoneX/00-intro.png)
 
 <a href="https://snack.expo.io/@react-navigation/boring-safe-area" target="blank" class="run-code-button">&rarr; Run the example pictured on the left</a> or, preferably, <a href="https://snack.expo.io/@react-navigation/nice-safe-area" target="blank" class="run-code-button">run the example pictured on the right.</a>
 
 ## Hidden/Custom Navigation Bar or Tab Bar
 
-![Default React Navigation Behavior](/docs/assets/iphoneX/01-iphonex-default.png)
+![Default React Navigation Behavior](/assets/iphoneX/01-iphonex-default.png)
 
 However, if you're overriding the default navigation bar, it's important to ensure your UI doesn't interfere with either of those hardware elements.
 
@@ -36,7 +36,7 @@ export default createStackNavigator({
 });
 ```
 
-![Text hidden by iPhoneX UI elements](/docs/assets/iphoneX/02-iphonex-content-hidden.png)
+![Text hidden by iPhoneX UI elements](/assets/iphoneX/02-iphonex-content-hidden.png)
 
 To fix this issue you can wrap your content in a `SafeAreaView`, which can be imported from `react-navigation`. Recall that `SafeAreaView` should not wrap entire navigators, just the screen components or any content in them.
 
@@ -55,19 +55,19 @@ class MyHomeScreen extends Component {
 }
 ```
 
-![Content spaced correctly with SafeAreaView](/docs/assets/iphoneX/03-iphonex-content-fixed.png)
+![Content spaced correctly with SafeAreaView](/assets/iphoneX/03-iphonex-content-fixed.png)
 
 This will detect if the app is running on an iPhoneX and, if so, ensure the content isn't hidden behind any hardware elements.
 
 ## Landscape Mode
 
 Even if you're using the default navigation bar and tab bar if your application works in landscape mode it's important to ensure you content isn't hidden behind the sensor cluster.
 
-![App in landscape mode with text hidden](/docs/assets/iphoneX/04-iphonex-landscape-hidden.png)
+![App in landscape mode with text hidden](/assets/iphoneX/04-iphonex-landscape-hidden.png)
 
 To fix this you can, once again, wrap your content in a `SafeAreaView`. This will not conflict with the navigation bar nor the tab bar's default behavior in portrait mode.
 
-![App in landscape mode with text visible](/docs/assets/iphoneX/05-iphonex-landscape-fixed.png)
+![App in landscape mode with text visible](/assets/iphoneX/05-iphonex-landscape-fixed.png)
 
 In conclusion, use the `SafeAreaView` component on the screens you register with a React Navigation navigator.
 

versioned_docs/version-3.x/material-bottom-tab-navigator.md

@@ -6,7 +6,7 @@ sidebar_label: createMaterialBottomTabNavigator
 
 A material-design themed tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.
 
-<img src="/docs/assets/navigators/bottom-navigation.gif" style={{ width: '420px', maxWidth: '100%' }} />
+<img src="/assets/navigators/bottom-navigation.gif" style={{ width: '420px', maxWidth: '100%' }} />
 
 To use this navigator, you need to install `react-navigation-material-bottom-tabs`
 

versioned_docs/version-3.x/modal.md

@@ -85,9 +85,9 @@ const RootStack = createStackNavigator(
 There are some important things to notice here:
 
 - As we know, the stack navigator function returns a React component (remember we render `<RootStack />` in our `App` component). This same component can be used as a screen component! By doing this, we are nesting a stack navigator inside of another stack navigator. In this case, this is useful for us because we want to use a different transition style for the modal, and we want to disable the header across the entire stack. In the future this will be important because for tab navigation, for example, each tab will likely have its own stack! Intuitively, this is what you expect: when you are on tab A and switch to tab B, you would like tab A to maintain its navigation state as you continue to explore tab B. Look at this diagram to visualize the structure of navigation in this example:
-  ![tree diagram](/docs/assets/modal/tree.png)
+  ![tree diagram](/assets/modal/tree.png)
 - The `mode` configuration for stack navigator can be either `card` (default) or `modal`. The `modal` behavior slides the screen in from the bottom on iOS and allows the user to swipe down from the top to dismiss it. The `modal` configuration has no effect on Android because full-screen modals don't have any different transition behavior on the platform.
-- When we call `navigate` we don't have to specify anything except the route that we'd like to navigate to. There is no need to qualify which stack it belongs to (the arbitrarily named 'root' or the 'main' stack) &mdash; React Navigation attempts to find the route on the closest navigator and then performs the action there. To visualize this, look again at [this diagram](/docs/assets/modal/tree.png) and imagine the `navigate` action flowing up from `HomeScreen` to `MainStack`, we know that `MainStack` can't handle the route `MyModal`, so it then flows it up to `RootStack`, which can handle that route and so it does.
+- When we call `navigate` we don't have to specify anything except the route that we'd like to navigate to. There is no need to qualify which stack it belongs to (the arbitrarily named 'root' or the 'main' stack) &mdash; React Navigation attempts to find the route on the closest navigator and then performs the action there. To visualize this, look again at [this diagram](/assets/modal/tree.png) and imagine the `navigate` action flowing up from `HomeScreen` to `MainStack`, we know that `MainStack` can't handle the route `MyModal`, so it then flows it up to `RootStack`, which can handle that route and so it does.
 
   ## Summary
 

versioned_docs/version-3.x/status-bar.md

@@ -66,7 +66,7 @@ export default createStackNavigator({
 });
 ```
 
-![StackNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-stack-demo.gif)
+![StackNavigator with different StatusBar configs](/assets/statusbar/statusbar-stack-demo.gif)
 
 ```jsx
 export default createDrawerNavigator({
@@ -79,7 +79,7 @@ export default createDrawerNavigator({
 });
 ```
 
-![DrawerNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-drawer-demo.gif)
+![DrawerNavigator with different StatusBar configs](/assets/statusbar/statusbar-drawer-demo.gif)
 
 ## TabNavigator
 
@@ -149,6 +149,6 @@ class Screen2 extends React.Component {
 ```
 
 
-![TabNavigator with different StatusBar configs](/docs/assets/statusbar/statusbar-tab-demo.gif)
+![TabNavigator with different StatusBar configs](/assets/statusbar/statusbar-tab-demo.gif)
 
 The code used for these demos is available as a [Snack](https://snack.expo.io/@react-navigation/react-navigation-docs:-stacknavigation-statusbar-v3).