-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
10 changed files
with
117 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| # API and Configuration | ||
|
|
||
| ## Available imports | ||
| - `Router` | ||
| - `Scene` | ||
| - `Actions` | ||
| - `ActionConst` | ||
|
|
||
| ## Router: | ||
|
|
||
| | Property | Type | Default | Description | | ||
| |-------------|----------|--------------|----------------------------------------------------------------| | ||
| | children | | required | Scene root element | | ||
| | `wrapBy` | `Function` | | allows integration of state management schemes like Redux (`connect`) and Mobx (`observer`) | | ||
|
|
||
| ## Scene: | ||
|
|
||
| | Property | Type | Default | Description | | ||
| |-----------|----------|----------|--------------------------------------------| | ||
| | `key` | `string` | required | Will be used to call screen transition, for example, `Actions.name(params)`. Must be unique. | | ||
| | `component` | `React.Component` | semi-required | The `Component` to be displayed. Not required when defining a nested `Scene`, see example. | | ||
| | `initial` | `boolean` | false | Set to `true` if this is the first scene to display among its sibling `Scene`s | | ||
| | `clone` | `boolean` | false | Scenes marked with `clone` will be treated as templates and cloned into the current scene's parent when pushed. See example. | | ||
| | `on` | `Function` | | aka `onEnter`. Called when the `Scene` is navigated to. `props` are provided as a function param | | ||
| | `onExit` | `Function` | | Called when the `Scene` is navigated away from. | | ||
| | `success` | `Function` | | If `on` returns a "truthy" value then `success` is called. | | ||
| | `failure` | `Function` | | If `on` returns a "falsey" value then `failure` is called. | | ||
| | `tabs` | `boolean` | false | load child scenes as [TabNavigator](https://reactnavigation.org/docs/navigators/tab). Other [Tab Navigator props](https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig) also apply here. | | ||
| | `hideTabBar` | `boolean` | false | hide the tab bar (only applies to scenes with `tabs` specified) | | ||
| | `drawer` | `boolean` | false | load child scenes inside [DrawerNavigator](https://reactnavigation.org/docs/navigators/drawer) | | ||
| | `contentComponent` | `React.Component` | | Component used to render the content of the drawer (e.g. navigation items). | | ||
| | `onLeft` | `boolean` | false | load child scenes as [DrawerNavigator](https://reactnavigation.org/docs/navigators/drawer) | | ||
| | `navTransparent` | `boolean` | false | nav bar background transparency | | ||
| | `hideNavBar` | `boolean` | false | hide the nav bar | | ||
| | `title` | `string` | | Text to be displayed in the center of the nav bar. | | ||
| | `onLeft` | `Function` | | Called when the left nav bar button is pressed. | | ||
| | `onRight` | `Function` | | Called when the right nav bar button is pressed. | | ||
| | `leftButtonImage` | `Image` | | Image to substitute for the left nav bar button | | ||
| | `rightButtonImage` | `Image` | | Image to substitute for the right nav bar button | | ||
| | `modal` | `boolean` | false | | | ||
| | `back` | `boolean` | false | Show a back button on the left side of the nav bar that calls `Actions.pop` on press. | | ||
| | all other props | | | Any other props not listed here will be pass on to the specified `Scene`'s `component` | | ||
|
|
||
| ## Actions | ||
|
|
||
| | Property | Type | Default | Description | | ||
| |-----------------|----------|----------|--------------------------------------------| | ||
| | `[key]` | `Function` | | Scenes are "automagically" added as functions on the `Actions` object by `key`. To navigate to a scene, call `Actions.{key}`. The function takes an `Object` which gets passed to the Scene as React props. | | ||
| | `pop` | `Function` | | Go back to the previous scene by "popping" the current scene off the nav stack | | ||
| | `refresh` | `Function` | | "Refresh" the current scene. The function takes an `Object` which gets passed to the Scene as React props. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,21 @@ | ||
| # Migrating from 2.x | ||
| # Migrating from 3.x | ||
|
|
||
| ## Breaking changes comparing with 2.x version: | ||
| - React Native 0.26 is required | ||
| - `Router` is root container now and should not be nested. For nested scenes you should use `Scene` element | ||
| - `Route` became `Scene`, now unique `key` attribute is required for each scene (it was `name` attribute before) | ||
| - Define all your scenes on top-level, not within `Router` as before (see Example) | ||
| - No `Schema` element is supported for now (for simplicity), maybe later it could be added | ||
| - No ActionSheet support | ||
| - Custom scene renderers are used instead of 'custom' types (like 'modal'), so 'modal' scenes are pushed as usual, but custom renderer will render them as popup. No `dismiss`, just usual `pop` to close such popups. | ||
| - No old navigator.sceneConfig support (instead the component uses React Native NavigationAnimatedView for better transitions) | ||
| - No onPush/onPop/etc handlers because they are not needed now. If navigation state is changed, container will be re-rendered with changed navigationState property, see `Modal` as Example. | ||
| - No header/footer properties are supported for Scene currently - you may include them into Scene component. | ||
| ## Breaking changes (compared to v3): | ||
| * `Actions.create` (alternative syntax to define scenes) is not available (for simplicity) - just use `<Router>` as top component for your App. You may wrap it with Redux as well. | ||
| * No `duration`/`panHandlers` support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop | ||
| https://reactnavigation.org/docs/navigators/custom. You could still pass `panHandlers={null}` to disable gestures or `gesturedEnabled={false}` | ||
| * No `component` support for scene containers (that contains children `Scene`) - you have to use custom navigator | ||
| * No support for partial hiding of tab bar for some tabs because of react navigation bug (react navigation issue): | ||
| https://github.com/react-community/react-navigation/issues/1584 | ||
| * No possibility to skip animation during reset/replace (react navigation issue): | ||
| https://github.com/react-community/react-navigation/issues/1493 | ||
| * `Switch` is removed - you may use onEnter/onExit handlers for more flexible logic. | ||
| * `getSceneStyle` is removed (no needed in v4, you may pass any values to Router now and they will be inherited by all scenes). | ||
| * Custom reducer is supported (`createReducer` prop for Router) but Redux actions now are passed directly from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.) | ||
| * Drawer is 'drawer' attribute Scene | ||
| * Modal is 'lightbox' attribute for Scene (used for popups, like Error) | ||
| * Container scenes (that has children) cannot have `component` (or it will be considered as child!). If you want to customize containers, use react navigation custom navigators and pass it as `navigator` prop. | ||
| * No `position` attribute is supported for custom transitions. For vertical transition add `modal` to parent `Scene`. | ||
| * No flux 'focus' actions - use onEnter/onExit handlers instead. | ||
| * tabBarSelectedItemStyle is not supported. Instead please use React Navigation TabBar params for tabs Scene: `activeTintColor`, `inactiveTintColor`, etc (https://reactnavigation.org/docs/navigators/tab) | ||
| * Possible other stuff. |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # Migrating from 2.x | ||
|
|
||
| ## Breaking changes comparing with 2.x version: | ||
| - React Native 0.26 is required | ||
| - `Router` is root container now and should not be nested. For nested scenes you should use `Scene` element | ||
| - `Route` became `Scene`, now unique `key` attribute is required for each scene (it was `name` attribute before) | ||
| - Define all your scenes on top-level, not within `Router` as before (see Example) | ||
| - No `Schema` element is supported for now (for simplicity), maybe later it could be added | ||
| - No ActionSheet support | ||
| - Custom scene renderers are used instead of 'custom' types (like 'modal'), so 'modal' scenes are pushed as usual, but custom renderer will render them as popup. No `dismiss`, just usual `pop` to close such popups. | ||
| - No old navigator.sceneConfig support (instead the component uses React Native NavigationAnimatedView for better transitions) | ||
| - No onPush/onPop/etc handlers because they are not needed now. If navigation state is changed, container will be re-rendered with changed navigationState property, see `Modal` as Example. | ||
| - No header/footer properties are supported for Scene currently - you may include them into Scene component. |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes