Use admonitions syntax for notes

Author: satya164

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

@@ -4,11 +4,19 @@ title: Integrating with MobX State Tree
 sidebar_label: MobX State Tree integration
 ---
 
-> TODO: This guide is incomplete. Please help improve this by sending pull requests.
+:::note
+
+This guide is incomplete. Please help improve this by sending pull requests.
+
+:::
 
 This guide explores possible way to use React Navigation in a React Native project that uses [MobX State Tree](https://github.com/mobxjs/mobx-state-tree)(MST) for state management. The guide is accompanied by a [sample app](https://github.com/vonovak/react-navigation-mst-demo). Parts of the guide may be relevant also for users of [MobX](https://github.com/mobxjs/mobx) but please be aware of the fact that MobX does not come with a built-in solution for (de)serializing its state.
 
-> Please note that in this guide, Mobx State Tree is not used to manage the navigation state itself - just the navigation params!
+:::note
+
+Please note that in this guide, Mobx State Tree is not used to manage the navigation state itself - just the navigation params!
+
+:::
 
 ## Overview
 

versioned_docs/version-6.x/auth-flow.md

@@ -11,7 +11,11 @@ Most apps require that a user authenticates in some way to have access to data a
 - When the state has loaded, the user is presented with either authentication screens or the main app, depending on whether valid authentication state was loaded.
 - When the user signs out, we clear the authentication state and send them back to authentication screens.
 
-> Note: We say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up.
+:::note
+
+We say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up.
+
+:::
 
 ## What we need
 
@@ -118,11 +122,19 @@ state.userToken == null ? (
 );
 ```
 
-> If you have both your login-related screens and rest of the screens in two different Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
+:::tip
+
+If you have both your login-related screens and rest of the screens in two different Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
+
+:::
 
 ## Implement the logic for restoring the token
 
-> Note: The following is just an example of how you might implement the logic for authentication in your app. You don't need to follow it as is.
+:::note
+
+The following is just an example of how you might implement the logic for authentication in your app. You don't need to follow it as is.
+
+:::
 
 From the previous snippet, we can see that we need 3 state variables:
 

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

@@ -41,7 +41,11 @@ function MyTabs() {
 }
 ```
 
-> For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
+:::note
+
+For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
+
+:::
 
 ### Props
 

versioned_docs/version-6.x/configuring-links.md

@@ -37,7 +37,11 @@ function App() {
 
 When you specify the `linking` prop, React Navigation will handle incoming links automatically. On Android and iOS, it'll use React Native's [`Linking` module](https://reactnative.dev/docs/linking) to handle incoming links, both when the app was opened with the link, and when new links are received when the app is open. On the Web, it'll use the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to sync the URL with the browser.
 
-> Note: Currently there seems to be bug ([facebook/react-native#25675](https://github.com/facebook/react-native/issues/25675)) which results in it never resolving on Android. We add a timeout to avoid getting stuck forever, but it means that the link might not be handled in some cases.
+:::warning
+
+Currently there seems to be bug ([facebook/react-native#25675](https://github.com/facebook/react-native/issues/25675)) which results in it never resolving on Android. We add a timeout to avoid getting stuck forever, but it means that the link might not be handled in some cases.
+
+:::
 
 You can also pass a [`fallback`](navigation-container.md#fallback) prop to `NavigationContainer` which controls what's displayed when React Navigation is trying to resolve the initial deep link URL.
 

versioned_docs/version-6.x/devtools.md

@@ -22,7 +22,11 @@ The package exposes the following APIs:
 
 This hook provides integration with [Flipper](https://fbflipper.com/) for React Native apps.
 
-> This doesn't work in Expo managed apps since they don't support Flipper.
+:::warning
+
+This doesn't work in Expo managed apps since they don't support Flipper.
+
+:::
 
 To be able to use this hook, you need to:
 

versioned_docs/version-6.x/drawer-layout.md

@@ -46,7 +46,11 @@ Then, you need to install and configure the libraries that are required by the d
    import 'react-native-gesture-handler';
    ```
 
-   > Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+   :::warning
+
+   If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+
+   :::
 
 3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 

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

@@ -46,7 +46,11 @@ Then, you need to install and configure the libraries that are required by the d
    import 'react-native-gesture-handler';
    ```
 
-   > Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+   :::warning
+
+   If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
+
+   :::
 
 3. If you're on a Mac and developing for iOS, you also need to install the pods (via [Cocoapods](https://cocoapods.org/)) to complete the linking.
 
@@ -75,7 +79,11 @@ function MyDrawer() {
 }
 ```
 
-> For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
+:::note
+
+For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
+
+:::
 
 ### Props
 

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

@@ -55,7 +55,11 @@ In your project directory, run:
 npm install react-native-screens react-native-safe-area-context
 ```
 
-> Note: You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
+:::note
+
+You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
+
+:::
 
 From React Native 0.60 and higher, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md). So you **don't need to run** `react-native link`.
 
@@ -89,7 +93,11 @@ import android.os.Bundle;
 
 This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.
 
-> Note: When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies. If you're getting an error "Unable to resolve module", you need to install that module in your project.
+:::info
+
+When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies. If you're getting an error "Unable to resolve module", you need to install that module in your project.
+
+:::
 
 ## Wrapping your app in `NavigationContainer`
 
@@ -106,7 +114,11 @@ export default function App() {
 }
 ```
 
-> Note: In a typical React Native app, the `NavigationContainer` should be only used once in your app at the root. You shouldn't nest multiple `NavigationContainer`s unless you have a specific use case for them.
+:::warning
+
+In a typical React Native app, the `NavigationContainer` should be only used once in your app at the root. You shouldn't nest multiple `NavigationContainer`s unless you have a specific use case for them.
+
+:::
 
 Now you are ready to build and run your app on the device/simulator.
 

versioned_docs/version-6.x/glossary-of-terms.md

@@ -4,7 +4,11 @@ title: Glossary of terms
 sidebar_label: Glossary of terms
 ---
 
-> This is a new section of the documentation and it's missing a lot of terms! Please [submit a pull request or an issue](https://github.com/react-navigation/react-navigation.github.io) with a term that you think should be explained here.
+:::note
+
+This is a new section of the documentation and it's missing a lot of terms! Please [submit a pull request or an issue](https://github.com/react-navigation/react-navigation.github.io) with a term that you think should be explained here.
+
+:::
 
 ## Navigator
 

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

@@ -23,7 +23,11 @@ It's tempting to solve (a) by wrapping your entire app in a container with paddi
 
 While React Native exports a `SafeAreaView` component, this component only supports iOS 10+ with no support for older iOS versions or Android. In addition, it also has some issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. So we recommend to use the `useSafeAreaInsets` hook from the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) library to handle safe areas in a more reliable way.
 
-> Note: The `react-native-safe-area-context` library also exports a `SafeAreaView` component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the `useSafeAreaInsets` hook instead and avoid using the `SafeAreaView` component.
+:::warning
+
+The `react-native-safe-area-context` library also exports a `SafeAreaView` component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the `useSafeAreaInsets` hook instead and avoid using the `SafeAreaView` component.
+
+:::
 
 The rest of this guide gives more information on how to support safe areas in React Navigation.