RouterSceneModalTabBargetInitialStateReducerDefaultRendererSwitchActionsActionConstNavBar
| Property | Type | Default | Description |
|---|
| reducer | function | | optional user-defined reducer for scenes, you may want to use it to intercept all actions and put your custom logic |
| createReducer | function | | function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below |
| other props | | | all properties that will be passed to all your scenes |
| children | | required (if no scenes property passed) | Scene root element |
| scenes | object | optional | scenes for Router created with Actions.create. This will allow to create all actions BEFORE React processing. If you don't need it you may pass Scene root element as children |
| getSceneStyle | function | optional | Optionally override the styles for NavigationCard's Animated.View rendering the scene. |
| backAndroidHandler | function | optional | Optionally override the handler for BackAndroid, return true to stay in the app or return false to exit the app. Default handler will pop a scene and exit the app at last when the back key is pressed on Android. |
| onBackAndroid | function | optional | Get called after back key is pressed and a scene is poped, won't affect the default behavior. |
| onExitApp | function | optional | Optionally override the default action after back key is pressed on root scene. Return true to stay, or return false to exit the app. |
| 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. If it is defined for 'container' scene, it will be used as custom container renderer |
| initial | bool | false | Set to true if this is the initial scene |
| type | string | ActionConst.PUSH or ActionConst.JUMP | Defines how the new screen is added to the navigator stack. One of ActionConst.PUSH, ActionConst.JUMP, ActionConst.REPLACE, ActionConst.RESET. If parent container is tabbar (tabs=true), ActionConst.JUMP will be automatically set. |
| clone | bool | | Scenes marked with clone will be treated as templates and cloned into the current scene's parent when pushed. See example. |
| passProps | bool | false | Pass all own props (except style, key, name, component, tabs) to children. Note that passProps is also passed to children. |
We accept shorthand string literal when defining scene type or action params, like:
Actions.ROUTE_NAME({type: 'reset'});
<Scene key="myscene" type="replace" >
but it will be converted to const value when pass to reducer.
RECOMMENDATION is to always use const instead of string literal for consistency:
Actions.ROUTE_NAME({type: ActionConst.RESET});
<Scene key="myscene" type={ActionConst.REPLACE} >
| Property | Type | Value | Shorthand |
|---|
| ActionConst.JUMP | string | 'REACT_NATIVE_ROUTER_FLUX_JUMP' | 'jump' |
| ActionConst.PUSH | string | 'REACT_NATIVE_ROUTER_FLUX_PUSH' | 'push' |
| ActionConst.REPLACE | string | 'REACT_NATIVE_ROUTER_FLUX_REPLACE' | 'replace' |
| ActionConst.BACK | string | 'REACT_NATIVE_ROUTER_FLUX_BACK' | 'back' |
| ActionConst.BACK_ACTION | string | 'REACT_NATIVE_ROUTER_FLUX_BACK_ACTION' | 'BackAction' |
| ActionConst.POP_AND_REPLACE | string | 'REACT_NATIVE_ROUTER_FLUX_POP_AND_REPLACE' | 'popAndReplace' |
| ActionConst.POP_TO | string | 'REACT_NATIVE_ROUTER_FLUX_POP_TO' | 'popTo' |
| ActionConst.REFRESH | string | 'REACT_NATIVE_ROUTER_FLUX_REFRESH' | 'refresh' |
| ActionConst.RESET | string | 'REACT_NATIVE_ROUTER_FLUX_RESET' | 'reset' |
| ActionConst.FOCUS | string | 'REACT_NATIVE_ROUTER_FLUX_FOCUS' | 'focus' |
ActionConst
are just a bunch of constants represent real values of various actions/scene.type to avoid future changes.
you can treat it like redux action.
These can be used directly, for example, Actions.pop() will dispatch correspond action written in the source code, or, you can set those constants in scene type, when you do Actions.main(), it will dispatch action according to your scene type or the default one.
Not every ActionConst can be used the same way ( use as an action or whether it can be set in scene type or not)
that's why it's just a bunch of constants to mask the actual values.
Scene.type
Defines how the new screen is added to the navigator stack. One of push, modal, actionSheet, replace, switch, reset transitionToTop. Default is 'push'.
And every Scene.type string literal has a mapped constant in ActionConst, it is recommended to always use constant.
replace: tells navigator to replace current route with new route.
actionSheet: shows Action Sheet popup, you must pass callback as callback function.
modal: type inserts its 'component' into route stack after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process). it could be dismissed by using Actions.dismiss().
switch: is used for tab screens.
reset: is similar to replace except it unmounts the componets in the navigator stack.
transitionToTop: will reset router stack ['route.name'] and with animation, if route has sceneConfig. eg <Route name="login" schema="modal" component={Login} type="transitionToTop" />
| Property | Type | Default | Description |
|---|
| duration | number | | optional. acts as a shortcut to writing an applyAnimation function with Animated.timing for a given duration (in ms). |
| direction | string | 'horizontal' | direction of animation horizontal/vertical/leftToRight ('horizontal' will be right to left) |
| animation | string | | animation options when transitioning: 'fade' currently only option |
| animationStyle | function | | optional interpolation function for scene transitions: animationStyle={interpolationFunction} |
| applyAnimation | function | | optional if provided overrides the default spring animation |
| Property | Type | Default | Description |
|---|
| panHandlers | object | | optional, provide null to disable swipe back gesture |
| getPanHandlers | function | optional | Optionally override the gesture handlers for scene |
| Property | Type | Default | Description |
|---|
| sceneStyle | View style | { flex: 1 } | optional style override for the Scene's component |
| getSceneStyle | function | optional | Optionally override the styles for NavigationCard's Animated.View rendering the scene. Receives first argument of NavigationSceneRendererProps and second argument of {hideNavBar,hideTabBar,isActive} (see Example app). |
| Property | Type | Default | Description |
|---|
| tabs | bool | false | Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no component is defined, built-in TabBar is used as renderer. All child scenes are wrapped into own navbar. |
| tabBarStyle | View style | | optional style override for the Tabs component |
| tabBarBackgroundImage | Image source | | optional background image for the Tabs component |
| tabBarIconContainerStyle | View style | | optional style override for the View that contains each tab icon |
| hideTabBar | bool | false | hides tab bar for this scene and any following scenes until explicitly reversed (if built-in TabBar component is used as parent renderer) |
| hideOnChildTabs | bool | false | hides tab bar when another tabs scene is added to the navigation stack. |
| pressOpacity | number | 0.2 | the opacity when clicking on the tab |
| Property | Type | Default | Description |
|---|
| hideNavBar | bool | false | hides the navigation bar for this scene and any following scenes until explicitly reversed |
| navigationBarStyle | View style | | optional style override for the navigation bar |
| navigationBarBackgroundImage | Image source | | optional background image for the navigation bar |
| navBar | React.Component | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference |
| drawerImage | Image source | require('./menu_burger.png') | Simple way to override the drawerImage in the navBar |
| Property | Type | Default | Description |
|---|
| title | string | null | The title to be displayed in the navigation bar |
| getTitle | function | optional | Optionally closure to return a value of the title based on state |
| renderTitle | function | optional | Optionally closure to render the title |
| titleStyle | Text style | | optional style override for the title element |
| titleOpacity | string | optional | Set opacity for the title in navigation bar |
| titleProps | object | null | Any other properties to be set on the title component |
| Property | Type | Default | Description |
|---|
| backTitle | string | | optional string to display with back button |
| renderBackButton | function | | optional closure to render back text or button if this route happens to be the previous route |
| backButtonImage | Image source | require('./back_chevron.png') | Simple way to override the back button in the navBar |
| backButtonTextStyle | Text style | | optional style override for the back title element |
| hideBackImage | boolean | false | no default back button image will be displayed |
| onBack | function | Actions.pop | actions for back button |
| Property | Type | Default | Description |
|---|
| leftTitle | string | | optional string to display on the left if the previous route does not provide renderBackButton prop. renderBackButton > leftTitle > <previous route's title> |
| getLeftTitle | function | | optional closure to display on the left if the previous route does not provide renderBackButton prop. renderBackButton > getLeftTitle > <previous route's title> |
| renderLeftButton | function | | optional closure to render the left title / buttons element |
| onLeft | function | | function will be called when left navBar button is pressed |
| leftButtonImage | Image source | | Image for left button |
| leftButtonIconStyle | View style | | Image style for left button |
| leftButtonStyle | View style | | optional style override for the container of left title / buttons |
| leftButtonTextStyle | Text style | | optional style override for the left title element |
| Property | Type | Default | Description |
|---|
| rightTitle | string | | optional string to display on the right. onRight must be provided for this to appear. |
| getRightTitle | function | | optional closure to display on the right. onRight must be provided for this to appear. |
| renderRightButton | function | | optional closure to render the right title / buttons element |
| onRight | function | | function will be called when right navBar button is pressed |
| rightButtonImage | Image source | | Image for right button |
| rightButtonIconStyle | View style | | Image style for right button |
| rightButtonStyle | View style | | optional style override for the container of right title / buttons |
| rightButtonTextStyle | Text style | | optional style override for the right title element |
| ...other props | | | all properties that will be passed to your component instance |