Skip to content

Commit 8fabf6d

Browse files
committed
Use admonitions syntax for notes
1 parent f6d409a commit 8fabf6d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+455
-97
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,19 @@ title: Integrating with MobX State Tree
44
sidebar_label: MobX State Tree integration
55
---
66

7-
> TODO: This guide is incomplete. Please help improve this by sending pull requests.
7+
:::note
8+
9+
This guide is incomplete. Please help improve this by sending pull requests.
10+
11+
:::
812

913
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.
1014

11-
> Please note that in this guide, Mobx State Tree is not used to manage the navigation state itself - just the navigation params!
15+
:::note
16+
17+
Please note that in this guide, Mobx State Tree is not used to manage the navigation state itself - just the navigation params!
18+
19+
:::
1220

1321
## Overview
1422

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ Most apps require that a user authenticates in some way to have access to data a
1111
- 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.
1212
- When the user signs out, we clear the authentication state and send them back to authentication screens.
1313

14-
> 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.
14+
:::note
15+
16+
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.
17+
18+
:::
1519

1620
## What we need
1721

@@ -118,11 +122,19 @@ state.userToken == null ? (
118122
);
119123
```
120124

121-
> 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.
125+
:::tip
126+
127+
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.
128+
129+
:::
122130

123131
## Implement the logic for restoring the token
124132

125-
> 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.
133+
:::note
134+
135+
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.
136+
137+
:::
126138

127139
From the previous snippet, we can see that we need 3 state variables:
128140

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ function MyTabs() {
4141
}
4242
```
4343

44-
> For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
44+
:::note
45+
46+
For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
47+
48+
:::
4549

4650
### Props
4751

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@ function App() {
3737

3838
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.
3939

40-
> 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.
40+
:::warning
41+
42+
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.
43+
44+
:::
4145

4246
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.
4347

versioned_docs/version-6.x/devtools.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ The package exposes the following APIs:
2222

2323
This hook provides integration with [Flipper](https://fbflipper.com/) for React Native apps.
2424

25-
> This doesn't work in Expo managed apps since they don't support Flipper.
25+
:::warning
26+
27+
This doesn't work in Expo managed apps since they don't support Flipper.
28+
29+
:::
2630

2731
To be able to use this hook, you need to:
2832

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ Then, you need to install and configure the libraries that are required by the d
4646
import 'react-native-gesture-handler';
4747
```
4848

49-
> 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.
49+
:::warning
50+
51+
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.
52+
53+
:::
5054

5155
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.
5256

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ Then, you need to install and configure the libraries that are required by the d
4646
import 'react-native-gesture-handler';
4747
```
4848

49-
> 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.
49+
:::warning
50+
51+
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.
52+
53+
:::
5054

5155
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.
5256

@@ -75,7 +79,11 @@ function MyDrawer() {
7579
}
7680
```
7781

78-
> For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
82+
:::note
83+
84+
For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
85+
86+
:::
7987

8088
### Props
8189

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,11 @@ In your project directory, run:
5555
npm install react-native-screens react-native-safe-area-context
5656
```
5757

58-
> 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.
58+
:::note
59+
60+
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.
61+
62+
:::
5963

6064
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`.
6165

@@ -89,7 +93,11 @@ import android.os.Bundle;
8993

9094
This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.
9195

92-
> 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.
96+
:::info
97+
98+
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.
99+
100+
:::
93101

94102
## Wrapping your app in `NavigationContainer`
95103

@@ -106,7 +114,11 @@ export default function App() {
106114
}
107115
```
108116

109-
> 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.
117+
:::warning
118+
119+
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.
120+
121+
:::
110122

111123
Now you are ready to build and run your app on the device/simulator.
112124

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ title: Glossary of terms
44
sidebar_label: Glossary of terms
55
---
66

7-
> 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.
7+
:::note
8+
9+
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.
10+
11+
:::
812

913
## Navigator
1014

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ It's tempting to solve (a) by wrapping your entire app in a container with paddi
2323

2424
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.
2525

26-
> 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.
26+
:::warning
27+
28+
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.
29+
30+
:::
2731

2832
The rest of this guide gives more information on how to support safe areas in React Navigation.
2933

0 commit comments

Comments
 (0)