GitXplorerGitXplorer
M

react-navigation-redux-example

public
4 stars
0 forks
17 issues

Commits

List of commits on branch master.
Unverified
8fc506d5de31ffbc3f482e3150d49fb3c7c0b780

updating todo

MMateusAndrade committed 6 years ago
Unverified
d42c879207ed07de29537e02cd2c13957aa99699

Updarting README.MD

MMateusAndrade committed 6 years ago
Unverified
f8e426b4474af2c2e2290727d593190c3b3bb3f9

Finish action to delete

MMateusAndrade committed 6 years ago
Unverified
526647259bb2567ac3d46f08ecc01914732ee02a

Adding config to hide tab bar

MMateusAndrade committed 6 years ago
Unverified
56e728dc5eecc7d07f713f9c2ec53a3f9d162a74

Creating Contact Details screen

MMateusAndrade committed 6 years ago
Unverified
66b20b5f2464f78443a6485836cf43ed865e3939

Removing borderBottom from userInfo

MMateusAndrade committed 6 years ago

README

The README file for this repository.

React-Native - Navigation with Redux

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.

Motivation

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. =)

Getting Started

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.

Deployment

After starting your development server just run a react-native run-android in a new shell tab.

Authors

TODO

  • Add action to edit user.
  • Write some JS Docs on redux and navigation actions.

Demo

Test