This is a simple react-native project consisting of a application with two tabs, each on with your screens, containers, etc.
Made with:
React Navigation - React Navigation v3.0.9 React Redux - React-Redux: v6.0.0 Redux - Redux v4.0.1.
As of version 2.0, the integration with Redux in its state is no longer officially supported by react-navigation.
From that point on, the state of your application's navigation and the state (redux for example) should be treated in separate ways. Instead of using something like the following:
const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
nav: navReducer,
...
});
// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
"root",
state => state.nav,
);
const App = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);
const store = createStore(
appReducer,
applyMiddleware(middleware),
);
- CODE
I hope with this boilerplate it is simpler to understand how to manage your navigation and its state separately. =)
Just clone this repo, and run a:
npm i && npm start
Or even simpler
yarn && yarn start
I recommend using a debugger like: React-Native Debugger.
After starting your development server just run a react-native run-android
in a new shell tab.
- Mateus Andrade - Initial work - https://github.com/MateusAndrade
- Add action to edit user.
- Write some JS Docs on redux and navigation actions.
Test