![npm version](https://camo.githubusercontent.com/865d34358d7762ed526002ce5e88645f4e09bee4ce63f6feb2621366b0cb30f9/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72656163742d6e61746976652d6475636b732d726f757465722e7376673f7374796c653d666c61742d737175617265)
![](https://camo.githubusercontent.com/2875b77c1acde1e9e233288245af631ec5d21bdabeca4306c012cea3c3e58135/68747470733a2f2f636c2e6c792f316e314330763179316733562f6475636b735f726f7465722e706e67)
![GitHub stars](https://camo.githubusercontent.com/dc521269997c7099ded25b4f2792a7dcdea5eded133e448d6b5b6d38a082920a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f696e7470702f72656163742d6e61746976652d6475636b732d726f757465722e7376673f7374796c653d736f6369616c266c6162656c3d53746172)
npm i --save react-native-ducks-router
import Router, { routerReducer } from 'react-native-ducks-router';
...
const Home = ({ params, onPressButton }) => <View>
<Text>Hello</Text>
<Button onPress={onPressButton} title={`Sign In`}/>
</View>;
const SignIn = ({ params, onPressButton }) => <View>
<Text>Sign In</Text>
<Button onPress={onPressButton} title={`About Us`}/>
</View>;
const About = ({ params, onPressButton }) => <View>
<Text>About {params.message}</Text>
<Button onPress={onPressButton} title={`Go back`}/>
</View>;
...
import { connect } from 'react-redux';
import { actionCreators } from 'react-native-ducks-router';
const routes = {
indexRoute: {
key: 'home', // required
component: connect(..., {
onPressButton: actionCreators.push.bind(null, { key: 'sign-in' }),
})(Home),
},
routes: [
{
key: 'about',
component: connect(..., {
onPressButton: actionCreators.pop,
})(About),
},
{
key: 'sign-in',
component: connect(..., {
onPressButton: actionCreators.push.bind(null, { key: 'about', params: { message: 'Hello' } }),
})(SignIn),
},
],
};
...
const reducers = {
// Your reducers ...
router: routerReducer,
};
...
const AppContainer = ({store, routes}) => <Provider store={store}>
<Router routes={routes}/>
</Provider>;
const App = () => <AppContainer
store={createStore(reducers, {})}
routes={routes}
/>;
...
AppRegistry.registerComponent('MyAwesomeApp', App);