Skip to content

Commit ade7995

Browse files
committed
docs: document static config api
1 parent 0448e3e commit ade7995

File tree

2 files changed

+55
-4
lines changed

2 files changed

+55
-4
lines changed

README.md

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
React Navigation integration for React Native's Modal component. This navigator works like a Stack Navigator, but each screen is shown as a modal using the `Modal` component from React Native.
88

9-
> Currently the `presentationStyle` of `pageSheet` and `formSheet` are not usable on iOS because it's impossible to detect when they are closed via gesture. See https://github.com/facebook/react-native/issues/29319
9+
> Currently the `presentationStyle` of `pageSheet` and `formSheet` are not usable on iOS because it's impossible to detect when they are closed via gesture. See <https://github.com/facebook/react-native/issues/29319>
1010
1111
## Demo
1212

@@ -22,6 +22,31 @@ npm install @react-navigation/native react-navigation-native-modal
2222

2323
To use this navigator, import it from `react-navigation-native-modal`:
2424

25+
With static config API:
26+
27+
```js
28+
import { createModalNavigator } from 'react-navigation-native-modal';
29+
30+
const MyModal = createModalNavigator({
31+
screens: {
32+
Home: {
33+
screen: HomeScreen,
34+
},
35+
Profile: {
36+
screen: ProfileScreen,
37+
},
38+
Settings: {
39+
screen: SettingsScreen,
40+
},
41+
Notification: {
42+
screen: NotificationScreen,
43+
}
44+
}
45+
});
46+
```
47+
48+
With dynamic config API:
49+
2550
```js
2651
import { createModalNavigator } from 'react-navigation-native-modal';
2752

@@ -51,7 +76,18 @@ The first screen in the stack is always rendered as a normal screen and not as a
5176

5277
All of the [props available on `Modal` component](https://reactnative.dev/docs/modal#props) can be specified in [options](https://reactnavigation.org/docs/screen-options) to configure the screens in the navigator, except `visible`, `onDismiss`, `onOrientationChange`, `onRequestClose` and `onShow`.
5378

54-
Example:
79+
With static config API:
80+
81+
```js
82+
Profile: {
83+
screen: ProfileScreen,
84+
options: {
85+
animationType: 'fade',
86+
},
87+
},
88+
```
89+
90+
With dynamic config API:
5591

5692
```js
5793
<Modal.Screen
@@ -107,7 +143,7 @@ Pushes a new screen to top of the modal stack and navigate to it. The method acc
107143
- `params` - Screen params to merge into the destination route (found in the pushed screen through `route.params`).
108144

109145
```js
110-
navigation.push('Profile', { owner: 'Michaś' });
146+
navigation.push('Profile', { owner: 'Jane' });
111147
```
112148

113149
#### `pop`
@@ -118,6 +154,21 @@ Pops the current screen from the modal stack and navigates back to the previous
118154
navigation.pop();
119155
```
120156

157+
### `popTo`
158+
159+
Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:
160+
161+
- `name` - string - Name of the route to navigate to.
162+
- `params` - object - Screen params to pass to the destination route.
163+
- `options` - Options object containing the following properties:
164+
- `merge` - boolean - Whether params should be merged with the existing route params, or replace them (when navigating to an existing screen). Defaults to `false`.
165+
166+
If a matching screen is not found in the stack, this will pop the current screen and add a new screen with the specified name and params.
167+
168+
```js
169+
navigation.popTo('Profile', { owner: 'Jane' });
170+
```
171+
121172
#### `popToTop`
122173

123174
Pops all of the screens in the modal stack except the first one and navigates to it.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"typecheck": "tsc --noEmit",
2828
"lint": "eslint \"**/*.{js,ts,tsx}\"",
2929
"prepare": "bob build",
30-
"release": "release-it",
30+
"release": "release-it --only-version",
3131
"example": "yarn workspace react-navigation-native-modal-example"
3232
},
3333
"keywords": [

0 commit comments

Comments
 (0)