react-native-redux-routing v1.2.7
An exquisitely crafted routing component for Redux based React Native applications.
Providing a consistent user interface for both iOS and Android.
Install
npm install -S react-native-redux-routing
Getting Started
Your Application.js
should looks like below:
import React from 'react'import Platform from 'react-native' import bindActionCreators from 'redux'import connect from 'react-redux' import actions as routerActions Router Route from 'react-native-redux-routing' import * as actionsA from './actions/actionsA'import * as actionsB from './actions/actionsB' import SplashPage MainPage from './pages' import ExtraDimensions from 'react-native-extra-dimensions-android' router: staterouter a: statea b: stateb actions: Component { const statusBarSize = PlatformOS === 'ios' ? 20 : PlatformVersion >= 23 ? ExtraDimensions : 0 const config = <NavigationDrawer /> accentColor: '#C2185B' transparentStatusBar: true statusBarStyle: 'light-content' statusBarSize // You have to specify the size of status bar manually return <Router = ="splash"> <Route ="splash" = = /> <Route ="main" = /> </Router> }
Component Properties
<Router/>
element:
For the You must set the initialRoute
property to get the router working.
You can set the config
property to pass in your custom configurations.
<Route/>
element:
For the You must set the id
property which is unique to each route.
You must set the component
property for which class should be rendered.
You can set the immersive
property to true to hide the app bar (including navigation drawer).
State Properties
this.props.router.drawerOpen
this.props.router.navTitle
this.props.router.data
this.props.router.routes
this.props.router.appBarSize
this.props.router.transitioning
API
All router-provided actions starts with an underscore in order to prevent possible conflictions.
this.props.actions._navigate(routeId, options = {})
thispropsactions // Push the "settings" route to the routes stackthispropsactions // Pop the last route in the routes stackthispropsactions // Reset the routes stack and navigate to "home" routethispropsactions // Changing scene with custom animationthispropsactions // Changing scene without animationthispropsactions // Replace the current scene to new scenethispropsactions // Move to another scene and transferring data to it
this.props.actions._setNavAction(action = { renderer, handler })
thispropsactionsthispropsactions // Reset nav action
this.props.actions._setNavTitle(title)
thispropsactions // Set the page title that shows on the app bar
this.props.actions._openDrawer()
thispropsactions // Open the navigation drawer
this.props.actions._closeDrawer()
thispropsactions // Close the navigation drawer
this.props.actions._addRouteListener(type, listener)
thispropsactions // Attach an `onUnload` listener for the current routethispropsactions // Attach an `onFocus` listener for the current routethispropsactions // Attach an `onBlur` listener for the current route
this.props.actions._removeRouteListener(listener)
thispropsactions // `listener` must be the same one as you added to removethispropsactions // `listener` must be the same one as you added to removethispropsactions // `listener` must be the same one as you added to remove
The dispatchable actions are listed below:
import types as routerTypes from 'react-native-redux-routing'
Configurations
You can modify the default configuration for the router by passing config
property into its properties.
The default configuration are listed below:
const defaultConfig = null accentColor: '#E0E0E0' transparentStatusBar: true statusBarStyle: 'default' statusBarSize: 20
Property | Type | Description |
---|---|---|
renderNavigationView | Function | Function that returns a React element. |
accentColor | String |
Sets the accent color of the application, must be a solid color starting with #. |
transparentStatusBar | Boolean | Indicates the status bar should be transparent. Android only. |
statusBarStyle | String |
Indicates the theme should be dark or light. Enum: "default", "light-content" |
statusBarSize | Number |
Specify the size of the status bar. Obtain yourself from other modules. |
Setting up navigation drawer
The drawer layout uses react-native-drawer-layout module, you can setup your own navigation drawer view renderer by setting renderNavigationView
property in the router config object.
{ const config = statusBarStyle: 'light-content' <NavigationDrawer /> accentColor: '#00695C' return <Router = ="calendar"> ... </Router> }
Adding navigation action dynamically
The example below shows how to adding a camera button dynamically:
{ thispropsactions thispropsactions}
Listening route focus / blur event
Component ... { this this thispropsactions thispropsactions } { thispropsactions thispropsactions // Alert message will not be shown again from now on } ...
Confirm leaving route
Component ... state = apples: 10 { this { if thisstateapples > 0 return 'Are you sure you want to leave your apples?' // returning null will not prompt for confirmation return null } thispropsactions } { thispropsactions // Unload listener has been removed } ...
Theming
You can theme your application easily by setting the accentColor
property in the router config object.
The default value of statusBarStyle
is "default"
which indicates a light theme, change it to "light-content"
for dark theme.
Credits
Thanks to react-native-drawer-layout and react-native-router-redux for their awesome work.