https://github.com/hellpirat/connected-react-navigation
https://github.com/hellpirat/connected-react-navigation
react-native react-navigation
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hellpirat/connected-react-navigation
- Owner: hellpirat
- License: mit
- Created: 2018-12-17T09:04:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-26T06:57:52.000Z (almost 7 years ago)
- Last Synced: 2025-03-17T17:48:26.678Z (over 1 year ago)
- Topics: react-native, react-navigation
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Todo
------
- [ ] Add reducer
- [ ] Implement all navigation methods of react-navigation (Back, setParams, etc)
- [ ] Add demo example
Installation
-----------
Using [npm](https://www.npmjs.com/):
$ npm install --save connected-react-navigation
Or [yarn](https://yarnpkg.com/):
$ 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')`.
```js
// 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
```js
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 (
{
// use NavgiationService to set top level navgiator ref
NavigationService.setTopLevelNavigator(navigatorRef)
}}/>
)
}
}
```
Now, it's ready to work!
```js
// 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](https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
Inspired by
------
- [connected-react-router](https://github.com/supasate/connected-react-router)