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
+1-1
Original file line number
Diff line number
Diff line change
@@ -55,7 +55,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa
55
55
56
56
Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure.
57
57
58
-
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).
58
+
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).
Copy file name to clipboardExpand all lines: blog/2018-05-07-react-navigation-2.0.md
+17-17
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ The following changes are considered “trivial” because you will only need ma
51
51
52
52
### Drawer routes have been replaced with actions
53
53
54
-
Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`. See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618).
54
+
Rather than opening a drawer with `navigation.navigate(‘DrawerOpen’)`, you can now call `navigation.openDrawer()`. Other methods are `closeDrawer()` and `toggleDrawer()`. See [pull 3618](https://github.com/react-navigation/react-navigation/pull/3618).
55
55
56
56
### Navigation actions API overhaul
57
57
@@ -61,7 +61,7 @@ In 1.x, functions on the `navigation` were not contextual - they would be the sa
61
61
62
62
Given that we only exposed generic helpers (`navigate`, `goBack`) and helpers specific to the stack in 1.x, this would only impact you if you attempted to use the stack helpers from outside of a stack. For example, if you had a tab navigator with a stack in tab A and just a plain screen in tab B, then tried to `push` a route from the screen in tab B, `push` would not be available. Keep this in mind when you update your app if it follows this type of structure.
63
63
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).
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
66
### NavigationActions no longer have `toString()` implementations ([related](https://github.com/react-navigation/react-navigation/issues/4072))
67
67
@@ -85,24 +85,24 @@ It is worth noting additionally that `createBottomTabNavigator` is different fro
85
85
86
86
## Enhancements
87
87
88
-
* dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669))
89
-
* State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716))
90
-
* Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821))
91
-
* Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540))
92
-
* Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951))
93
-
* Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496))
94
-
* Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)).
95
-
* Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900)
96
-
* Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2))
97
-
* Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8))
98
-
* Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f))
88
+
- dangerouslyGetParent and dismiss helpers on navigation prop ([3669](https://github.com/react-navigation/react-navigation/pull/3669))
89
+
- State persistence - automatically save state and reload it when the app restarts ([3716](https://github.com/react-navigation/react-navigation/pull/3716))
90
+
- Smoothly transition header visibility in Stack ([3821](https://github.com/react-navigation/react-navigation/pull/3821))
91
+
- Add initialRouteKey for StackRouter ([3540](https://github.com/react-navigation/react-navigation/pull/3540))
92
+
- Make StackNavigator keyboard aware -- it hides automatically when you start to swipe back, and refocuses if you cancel the swipe back gesture ([3951](https://github.com/react-navigation/react-navigation/pull/3951))
93
+
- Allow modification of SafeAreaView props in header ([3496](https://github.com/react-navigation/react-navigation/pull/3496))
94
+
- Add `createMaterialBottomTabNavigator` for a material design style tab bar. (see [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs)).
95
+
- Use findIndex instead of map/indexOf in StateUtils ([commit](https://github.com/react-navigation/react-navigation/commit/47fe858d4ec339d2b1f4b96f3a5444aed8f6f900)
96
+
- Warn when users have multiple stateful navigation containers ([commit](https://github.com/react-navigation/react-navigation/commit/68a2a106f370003dc1d46385fd8b5992be189ee2))
97
+
- Remove almost all uses of React 16 deprecated lifecycle methods ([commit](https://github.com/react-navigation/react-navigation/commit/3f837c895e823de4d528b55fd70ee7ba167480d8))
98
+
- Add `activeLabelStyle` and `inactiveLabelStyle` for `DrawerItem` ([commit](https://github.com/react-navigation/react-navigation/commit/7c488c8d4974028f85a4c5171d27209fa099170f))
* Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940))
104
-
* Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)).
105
-
*`SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)).
- Use Header.HEIGHT instead of measuring to avoid flicker ([3940](https://github.com/react-navigation/react-navigation/pull/3940))
104
+
- Implement paths on `SwitchRouter` ([commit](https://github.com/react-navigation/react-navigation/commit/5e4512f3ebef587bf90e4ec4d660708b72a0a865)).
105
+
-`SwitchRouter` now returns `null` on idempotent navigation ([commit](https://github.com/react-navigation/react-navigation/commit/577d99c1658ef85c061c82d55bf349c38e161e97)).
This should be an easy change - import `createAppContainer` in the root of your app and use it to wrap the root navigator.
48
48
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.
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.
50
50
51
51
### Renamed navigationOptions in navigator configuration
52
52
53
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:
54
54
55
55
```js
56
-
constHome=createStackNavigator({
57
-
Feed: ExampleScreen,
58
-
Profile: ExampleScreen,
59
-
}, {
60
-
navigationOptions: {
61
-
headerTintColor:'#fff',
62
-
headerStyle: {
63
-
backgroundColor:'#000',
56
+
constHome=createStackNavigator(
57
+
{
58
+
Feed: ExampleScreen,
59
+
Profile: ExampleScreen,
60
+
},
61
+
{
62
+
navigationOptions: {
63
+
headerTintColor:'#fff',
64
+
headerStyle: {
65
+
backgroundColor:'#000',
66
+
},
64
67
},
65
68
}
66
-
});
69
+
);
67
70
```
68
71
69
72
As of this release, `navigationOptions` in navigator configuration like this has been renamed to `defaultNavigationOptions`.
70
73
71
74
```js
72
-
constHome=createStackNavigator({
73
-
Feed: ExampleScreen,
74
-
Profile: ExampleScreen,
75
-
}, {
76
-
defaultNavigationOptions: {
77
-
headerTintColor:'#fff',
78
-
headerStyle: {
79
-
backgroundColor:'#000',
80
-
},
75
+
constHome=createStackNavigator(
76
+
{
77
+
Feed: ExampleScreen,
78
+
Profile: ExampleScreen,
81
79
},
82
-
});
80
+
{
81
+
defaultNavigationOptions: {
82
+
headerTintColor:'#fff',
83
+
headerStyle: {
84
+
backgroundColor:'#000',
85
+
},
86
+
},
87
+
}
88
+
);
83
89
```
84
90
85
91
Sometimes you need to configure the `navigationOptions` for a navigator itself. Typically you’d do something like this:
As of this release, you can use `navigationOptions` in the navigator config for this instead.
92
98
93
99
```js
94
-
constHome=createStackNavigator({
95
-
Feed: ExampleScreen,
96
-
Profile: ExampleScreen,
97
-
}, {
98
-
defaultNavigationOptions: {
99
-
headerTintColor:'#fff',
100
-
headerStyle: {
101
-
backgroundColor:'#000',
102
-
},
100
+
constHome=createStackNavigator(
101
+
{
102
+
Feed: ExampleScreen,
103
+
Profile: ExampleScreen,
103
104
},
104
-
navigationOptions: {
105
-
tabBarLabel:'Home!',
106
-
},
107
-
});
105
+
{
106
+
defaultNavigationOptions: {
107
+
headerTintColor:'#fff',
108
+
headerStyle: {
109
+
backgroundColor:'#000',
110
+
},
111
+
},
112
+
navigationOptions: {
113
+
tabBarLabel:'Home!',
114
+
},
115
+
}
116
+
);
108
117
109
118
constTabs=createBottomTabNavigator({ Home });
110
119
```
@@ -132,7 +141,7 @@ const Store = createStackNavigator({
132
141
133
142
- Basic support for hooks in `react-navigation-hooks`
134
143
-`headerBackgroundTransitionPreset: 'toggle' | 'fade' | 'translate'` lets you choose how to transition your custom `headerBackground` components between screens.
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`.
144
+
- 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`.
136
145
- 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: [GestureInteraction.js](https://github.com/react-navigation/react-navigation-drawer/blob/bf4bdba7f6a4fbc12192f5d5ba2285f6280431b7/example/src/GestureInteraction.js)).
137
146
138
147
## Assorted fixes & improvements
@@ -171,7 +180,7 @@ To keep the experience as simple as possible the `react-navigation` package will
171
180
172
181
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`.
173
182
174
-
Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component:
183
+
Here is an example web app which demonstrates the new `createBrowserApp` container and the built-in `Link` component:
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.
215
224
216
-
----------
225
+
---
217
226
218
227
Thanks for reading, please post any issues you encounter to [react-navigation/issues](https://github.com/react-navigation/react-navigation/issues)!
Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.
10
+
Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.
11
11
12
12
<!--truncate-->
13
13
@@ -68,7 +68,7 @@ navigation.setOptions({
68
68
}}
69
69
/>
70
70
),
71
-
})
71
+
});
72
72
```
73
73
74
74
It can be used for things like adding a button in the header which needs to interact with the screen state.
@@ -96,6 +97,7 @@ Phones have small screens, so it's important to maximize the use of available sc
96
97
It's especially important in case of the [stack navigator](/docs/stack-navigator) because not only we have the browser's address bar, but also the header at the top which is taking vertical space. Now we'll automatically adjust the styles of the stack navigator to get this behavior without you having to write any special code.
@@ -104,6 +106,7 @@ It's especially important in case of the [stack navigator](/docs/stack-navigator
104
106
Another way we can make maximum use of the available screen size is by making our UIs adapt to different screen sizes. For example, we may want to show a sidebar for navigation on large screens while switching to a drawer on smaller screens. You can now specify `drawerType` as `permanent` to show an always visible sidebar. See the [documentation for `drawerType`](/docs/drawer-navigator#drawertype) for example code on how to achieve it.
We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
10
+
We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
0 commit comments