A react-native-drawer implemented example and scaffolding for react-native-router-flux.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4c258e1 May 30, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Adding .gitignore Jun 27, 2016
ios Code refactoring Mar 17, 2016
src Separating Navigator component May 30, 2017
.eslintignore Code refactoring Mar 17, 2016
.eslintrc Code refactoring Mar 17, 2016
.gitignore Adding .gitignore Jun 27, 2016
README.md Update README.md May 30, 2017
change_these_folders_with_their_originals.zip Update router files May 30, 2017
index.android.js Code refactoring Mar 17, 2016
index.ios.js Code refactoring Mar 17, 2016
intro.gif Adding .gitignore Jun 27, 2016
package.json Update package.json May 30, 2017
presentation.gif Added files via upload Mar 18, 2016

README.md

Deprecated - This repo uses obsolete versions of react-native-router-flux and react-native-drawer. I update the repo for now. But I may not update on someday.
Recommendation - Try react-navigation module. It uses pure react-native components as much as possible.

rndrawer-implemented-rnrouter

An example for react-native-drawer and react-native-router-flux. The example has been developed by using react-native-drawer 1.X and react-native-router-flux 2.X. The new versions of the libraries are not stable yet (2016-04-24). You might try to contribute them! Both of them welcome the new PR.

With this scaffolding you can create side menu (drawer) and navigate between your screens (pages) easily.

For the sake of example the screens below have been created;

  • Login
  • Register
  • Home
  • Screen 1
  • Screen 2

The scenarios of the example;

  • The user opens the app
  • The user logins or registers
  • The user navigates the screens by using drawer menu
  • The user logs out

The example has been shaped like an Android app. Actually, it is an cross-platform app and you could give shape like an IOS app.

launch

Installation

Because of some breaking changes that've been made in React-Native in the past, some node_modules files must be changed with their originals.

iOS

  1. Run the command of react-native init reactNativeRouterFluxSample & cd reactNativeRouterFluxSample
  2. Then npm i --save react-native-drawer@1.16.7 & npm i --save react-native-router-flux@2.2.7 & npm i --save react-native-button@1.4.2
  3. Then copy src folder and index.ios.js file of rndrawer-implemented-rnrouter into the new initiated project.
  4. Finally, official site says that; "Open ios/reactNativeRouterFluxSample.xcodeproj and hit run in Xcode".

Android

  1. Run the command of react-native init reactNativeRouterFluxSample & cd reactNativeRouterFluxSample
  2. Then npm i --save react-native-drawer@1.16.7 & npm i --save react-native-router-flux@2.2.7 & npm i --save react-native-button@1.4.2
  3. Then copy src folder and index.android.js file of rndrawer-implemented-rnrouter into the new initiated project.
  4. Finally, run the command of react-native run-android & react-native start and then click to the Reload button on the red screen.