Todo

• [ ] Add reducer
• [ ] Implement all navigation methods of react-navigation (Back, setParams, etc)
• [ ] Add demo example

Installation

Using npm:

$ npm install --save connected-react-navigation

Or yarn:

$ yarn add connected-react-navigation

Usage

Step 1

• Use navigationMiddleware() for dispatching navigations in actions (e.g. to change Screen with navgiation('/path/to/screen').

// configureStore.js
...
import { createStore, applyMiddleware } from 'redux'
import { navigationMiddleware } from 'connected-react-navigation'
import createRootReducer from './reducers'
...

const middlewares = [navigationMiddleware]
const store = createStore(createRootReducer, applyMiddleware(...middlewares))

Step 2

• Use NavigationService on the top-level (root) navigator of your app

import React from 'react'
import { Provider } from 'react-redux'
import { NavigationService } from 'connected-react-navigation'

...
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: "Home"
  }
);

export class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigator ref={navigatorRef => { 
	      // use NavgiationService to set top level navgiator ref 
          NavigationService.setTopLevelNavigator(navigatorRef)
        }}/>
      </Provider>
    )
  }
}

Now, it's ready to work!

// usage in actions
import { navigate } from 'connected-react-navigation'

dispatch(navigate('ScreenName', {params}))

How this work

• This library implement usage from docs: Navigating without the navigation prop

Inspired by

• connected-react-router