You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blog/2018-04-06-react-navigation-2.0-rc.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -11,11 +11,11 @@ Exactly two months after the release of React Navigation 1.0, we are close to an
11
11
12
12
<!--truncate-->
13
13
14
-
```
14
+
```sh
15
15
yarn add react-navigation@^2.0.0-rc.1
16
16
```
17
17
18
-
The documentation for 2.0 is available at https://reactnavigation.org/
18
+
The documentation for 2.0 is available at <https://reactnavigation.org/>
19
19
20
20
We’re bumping the major version because some of the changes in this release are backwards incompatible. That said, this should be a fairly easy upgrade. We are improving React Navigation incrementally because we don't want to leave developers feeling stranded in an old version. If you use React Navigation in a conventional way and don't have any custom navigators, I can't imagine this update would take you more than an hour.
21
21
@@ -63,7 +63,7 @@ The following APIs are deprecated and will be removed in 3.0.
63
63
64
64
### XNavigator is now named createXNavigator
65
65
66
-
```
66
+
```js
67
67
import { createStackNavigator } from ‘react-navigation’;
68
68
createStackNavigator({routeName: Screen});
69
69
```
@@ -77,5 +77,5 @@ This change was made to improve the ease of learning and understanding the libra
77
77
## New feature highlights
78
78
79
79
- State persistence - automatically save state and reload it when the app restarts. See [state persistence docs](docs/state-persistence)
80
-
- Transitions between screens in stack with headers and without headers now animates as expected on iOS. https://github.com/react-navigation/react-navigation/pull/3821. Thanks [skevy](https://github.com/skevy)!
80
+
- Transitions between screens in stack with headers and without headers now animates as expected on iOS. <https://github.com/react-navigation/react-navigation/pull/3821>. Thanks [skevy](https://github.com/skevy)!
81
81
- As mentioned above, `createMaterialBottomNavigator` is a new navigator type that provides the material design bottom tab bar pattern.
The documentation is now live at https://reactnavigation.org, and v1 lives [here](/docs/1.x/getting-started).
10
+
The documentation is now live at <https://reactnavigation.org>, and v1 lives [here](/docs/1.x/getting-started).
11
11
12
12
<!--truncate-->
13
13
@@ -63,7 +63,7 @@ Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers sp
63
63
64
64
One of the big improvements you get from this is that you can now add your own helpers to the `navigation` prop! Read more in [RFC 6](https://github.com/react-navigation/rfcs/blob/master/text/0006-action-creators.md) and in [pull 3392](https://github.com/react-navigation/react-navigation/pull/3392).
65
65
66
-
### NavigationActions no longer have `toString()` implementations ([related](https://github.com/react-navigation/react-navigation/issues/4072))
66
+
### NavigationActions no longer have `toString()` implementations ([related](https://github.com/react-navigation/react-navigation/issues/4072))
67
67
68
68
This change was intended to simplify the implementation of actions. We may go back on this, however, and apologize in advance if this thrasing causes you trouble.
69
69
@@ -73,7 +73,7 @@ If you are using `NavigationActions.push` or other stack-specific actions, you
73
73
74
74
## Deprecations
75
75
76
-
### XNavigator(...) is now createXNavigator(...)
76
+
### XNavigator(...) is now createXNavigator(...)
77
77
78
78
`StackNavigator`, `TabNavigator` and `DrawerNavigator` are now deprecated in favour of `createStackNavigator`, `createTabNavigator`, and `createDrawerNavigator`, which are functionally identical but more clearly communicate that they are functions and that they return a component. The `XNavigator` style will removed in 3.0.
Copy file name to clipboardExpand all lines: blog/2018-11-01-react-navigation-3.0-rc.md
+16-23
Original file line number
Diff line number
Diff line change
@@ -17,22 +17,21 @@ We didn’t get around to every feature that we wanted to land for this release,
17
17
18
18
Let’s get started with react-navigation 3.0.
19
19
20
-
# Installation
20
+
##Installation
21
21
22
22
First, install the library using your favorite package manager: `yarn add react-navigation@^3.0.0-rc.0`
23
23
24
24
Next, install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK. Otherwise: `yarn add react-native-gesture-handler && react-native link`
25
25
26
-
Optionally, you can install react-native-screens. If you’re using Expo you don’t need to do anything here, it’s included in SDK 30 and higher. Otherwise, follow the instructions in the README on https://github.com/kmagiera/react-native-screens.
26
+
Optionally, you can install react-native-screens. If you’re using Expo you don’t need to do anything here, it’s included in SDK 30 and higher. Otherwise, follow the instructions in the README on <https://github.com/kmagiera/react-native-screens>.
27
27
28
28
> **Warning**: if you have manually installed any navigators in your project, for example react-navigation-material-bottom-tabs, you will need to update those to a version that is compatible with 3.0.0. In the case of react-navigation-material-bottom-tabs, 1.0.0-alpha.2 is compatible.
29
29
30
-
# Breaking changes
30
+
##Breaking changes
31
31
32
32
When you first run your app after updating it won’t work because react-navigation@^3 requires you to add an app container to the root navigator. Once you get that in place, you may notice that your navigation options aren’t being applied as you expect - this is due to navigationOptions in navigator configuration being renamed to defaultNavigationOptions. If you use a drawer, you may notice that it feels quicker, but if you depend on inactive screens being unmounted you’ll be surprised. More details on these changes and how to update your app to work just as well (probably better) than before below.
33
33
34
-
35
-
## Explicit app container required for the root navigator
34
+
### Explicit app container required for the root navigator
36
35
37
36
In the past, any navigator could act as the navigation container at the top-level of your app because they were all wrapped in “navigation containers”. The navigation container, now known as an app container, is a higher-order-component that maintains the navigation state of your app and handles interacting with the outside world to turn linking events into navigation actions and so on.
38
37
@@ -49,7 +48,7 @@ This should be an easy change - import `createAppContainer` in the root of your
49
48
50
49
> **Warning**: if you have any custom navigators, you may have used `createNavigationContainer`, you can remove this now because it’s only used at the root of the app and provided by the user.
51
50
52
-
## Renamed navigationOptions in navigator configuration
51
+
###Renamed navigationOptions in navigator configuration
53
52
54
53
When configuring navigators it’s often useful to pass in default navigation options for the screens inside of that navigator. For example in a stack you might want to set a background color and tint color for each screen. Previously, you would write something like this:
55
54
@@ -85,7 +84,6 @@ const Home = createStackNavigator({
85
84
86
85
Sometimes you need to configure the `navigationOptions` for a navigator itself. Typically you’d do something like this:
87
86
88
-
89
87
```js
90
88
Home.navigationOptions= { tabBarLabel:'Home!' };
91
89
```
@@ -115,11 +113,11 @@ const Tabs = createBottomTabNavigator({ Home });
115
113
116
114
We’re sorry to make you go hunt through your code and rename a handful of strings, the hope is that this change makes the code more readable and more intuitive to new users in the future.
117
115
118
-
## Drawer now keeps inactive tabs in memory by default
116
+
###Drawer now keeps inactive tabs in memory by default
119
117
120
118
Previously when using the drawer navigator screens would unmount when inactive, and when you switch back to them you’d need to re-render the entire thing. In tabs these stay in memory as you would expect, so once you switch to the screen once it’s faster to go back there again and you don’t lose your place in a scroll view or anything. Drawer now behaves the same way, but you can go back to the old behavior if you like by passing in `unmountInactiveRoutes: true` in the drawer navigation configuration.
121
119
122
-
# New features
120
+
##New features
123
121
124
122
- react-navigation now exports `ScrollView`, `FlatList`, and `SectionList` that will scroll to top when tapping on the active tab as you would expect from native tab bars.
125
123
- Drawer supports two more types in addition to the default ‘front’ behavior that you expect from typical Android drawers: back and slide.
@@ -132,37 +130,35 @@ const Store = createStackNavigator({
132
130
});
133
131
```
134
132
135
-
136
133
- Basic support for hooks in `react-navigation-hooks`
137
134
-`headerBackgroundTransitionPreset: 'toggle' | 'fade' | 'translate'` lets you choose how to transition your custom `headerBackground` components between screens.
138
135
- Add options to opt in/out of the stack card overlay and shadow that are visible during transitions: `cardShadowEnabled` defaults to `true` and `cardOverlayEnabled` defaults to `false`.
139
-
- Export `StackGestureContext` and `DrawerGestureContext` from react-navigation-stack and react-navigation-drawer, so you can use the ref from the corresponding gestures with other gesture handlers (eg: https://github.com/react-navigation/react-navigation-drawer/blob/bf4bdba7f6a4fbc12192f5d5ba2285f6280431b7/example/src/GestureInteraction.js).
136
+
- Export `StackGestureContext` and `DrawerGestureContext` from react-navigation-stack and react-navigation-drawer, so you can use the ref from the corresponding gestures with other gesture handlers (eg: <https://github.com/react-navigation/react-navigation-drawer/blob/bf4bdba7f6a4fbc12192f5d5ba2285f6280431b7/example/src/GestureInteraction.js>).
140
137
141
-
# Assorted fixes & improvements
138
+
##Assorted fixes & improvements
142
139
143
140
- Stack transition performance improved greatly by removing the shadow from the entire card and rendering it only on the slice where it is needed. The card opacity is also no longer directly animated but instead an overlay is put on top to create a similar effect but with better performance.
144
-
- Fix long-standing issues with stack that led to quietly re-mounting screens when navigating quickly in certain patterns: https://github.com/react-navigation/react-navigation/issues/4155
141
+
- Fix long-standing issues with stack that led to quietly re-mounting screens when navigating quickly in certain patterns: <https://github.com/react-navigation/react-navigation/issues/4155>
145
142
- Support inverted gesture in modals.
146
143
- Stack card gesture uses react-native-gesture-handler and native driver so the gesture runs on the UI thread (except when the gesture ends, then it calls back to JS).
147
-
- Fix a variety of issues with drawer navigator, including issues around nesting (https://github.com/react-navigation/react-navigation/issues/4154) and bugs with firing open / close (eg: https://github.com/react-navigation/react-navigation/issues/5146).
148
-
# Ecosystem and web support
144
+
- Fix a variety of issues with drawer navigator, including issues around nesting (<https://github.com/react-navigation/react-navigation/issues/4154>) and bugs with firing open / close (eg: <https://github.com/react-navigation/react-navigation/issues/5146>).
145
+
146
+
## Ecosystem and web support
149
147
150
148
React Navigation 3.0 brings some important changes to the React Navigation ecosystem: the project now lives across a number of repositories and packages, we have an exciting new transitioner on the way, and the core finally has first-class support for web apps on the client and server!
151
149
152
-
## Independent Projects
150
+
###Independent Projects
153
151
154
152
React Navigation has always been a set of loosely-coupled navigation components: Stack, Tabs, Drawer, etc. But until now they have always lived in the main navigation repo, which has been difficult to maintain. People often struggle to use different versions of these components, or they want to fork them for their own app.
155
153
156
154
In v3, all of our main packages and repos are separated. There are the following core packages in our new NPM org:
157
155
158
-
159
156
-`@react-navigation/core` - The primitives and utilities that define our patterns, plus several routers
160
157
-`@react-navigation/native` - Container and support for navigators on React Native apps. `createAppContainer` from the main `react-navigation` package actually comes from this package.
161
158
-`@react-navigation/web` - Web browser app container, and utilities for server rendering
162
159
163
160
In addition, we have published our community-maintained components as standalone repos and packages:
164
161
165
-
166
162
-`react-navigation-stack`
167
163
-`react-navigation-tabs`
168
164
-`react-navigation-drawer`
@@ -171,14 +167,12 @@ In addition, we have published our community-maintained components as standalone
171
167
172
168
To keep the experience as simple as possible the `react-navigation` package will continue to be supported, and will contain most of the above components as it did before.
173
169
174
-
175
-
## Web Support
170
+
### Web Support
176
171
177
172
Now that the core of React Navigation can be used outside of React Native, we can provide first-class web support to anyone using React.js on the web, including those who do not want to use `react-native-web`.
178
173
179
174
Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component:
import { createBrowserApp, Link } from"@react-navigation/web";
@@ -219,7 +213,6 @@ The above `Link` tag will render to:
219
213
220
214
See a simple web app with Create React App [here](https://github.com/react-navigation/example-web). Or take a look at [this razzle app](https://github.com/react-navigation/web-server-example) for a more complicated example including server rendering.
221
215
222
-
223
216
----------
224
217
225
-
Thanks for reading, please post any issues you encounter to https://github.com/react-navigation/react-navigation/issues!
218
+
Thanks for reading, please post any issues you encounter to <https://github.com/react-navigation/react-navigation/issues>!
0 commit comments