upgrade to react navigation v4

aksonov · Sep 17, 2019 · 5e01ac2 · 5e01ac2
1 parent 3871a06
commit 5e01ac2
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 216 deletions.
diff --git a/README.md b/README.md
@@ -5,20 +5,32 @@
 `react-native-router-flux` is a different API over `react-navigation`. It helps users to define all the routes in one central place and navigate and communicate between different screens in an easy way. But it also means that `react-native-router-flux` inherits all [limitations](https://reactnavigation.org/docs/en/limitations.html) and changes from updated versions.
 
 ### IMPORTANT NOTES
-#### v4.1.0-beta.x is based on [React Navigation v3.x](https://reactnavigation.org/)
-#### v4 is based on [React Navigation v2.x]. See [this branch](https://github.com/aksonov/react-native-router-flux/tree/v3) and [docs](https://github.com/aksonov/react-native-router-flux/blob/master/README3.md) for v3 based on deprecated React Native Experimental Navigation API. It is not supported and may not work with latest React Native versions.
+
+#### v4.2.0-beta.x is based on [React Navigation v4.x](https://reactnavigation.org/)
+
+#### v4.1.0-beta.x is based on [React Navigation v3.x](https://reactnavigation.org/docs/en/3.x/getting-started.html)
+
+#### v4.0.x is based on [React Navigation v2.x]. See [this branch](https://github.com/aksonov/react-native-router-flux/tree/v3) and [docs](https://github.com/aksonov/react-native-router-flux/blob/master/README3.md) for v3 based on deprecated React Native Experimental Navigation API. It is not supported and may not work with latest React Native versions.
 
 #### v4.0.0-beta.x is based on [React Navigation v1.5.x](https://reactnavigation.org/). See [this branch](https://github.com/aksonov/react-native-router-flux/tree/v4.0.0-beta) for this version. It is also not supported and may not work with the latest React Native versions.
 
-___
+---
+
+- [Examples](#try-the-example-apps)
+- [Motivation](https://gist.github.com/aksonov/e2d7454421e44b1c4c72214d14053410)
+- [v4 Features](#v4-features)
+- [API](/docs/API.md)
+- [Migrating from v3](/docs/MIGRATION.md)
+- [Sponsors/Backers/Contributors](#contributors)
+
+## Getting Started
 
-* [Examples](#try-the-example-apps)
-* [Motivation](https://gist.github.com/aksonov/e2d7454421e44b1c4c72214d14053410)
-* [v4 Features](#v4-features)
-* [API](/docs/API.md)
-* [Migrating from v3](/docs/MIGRATION.md)
-* [Sponsors/Backers/Contributors](#contributors)
+1. Install native dependencies used by React Native Router (https://reactnavigation.org/docs/en/getting-started.html)
+2. Install this component
 
+```
+yarn add react-native-router-flux
+```
 
 ## Usage
 
@@ -28,9 +40,9 @@ Define all your routes in one React component...
 const App = () => (
   <Router>
     <Stack key="root">
-      <Scene key="login" component={Login} title="Login"/>
-      <Scene key="register" component={Register} title="Register"/>
-      <Scene key="home" component={Home}/>
+      <Scene key="login" component={Login} title="Login" />
+      <Scene key="register" component={Register} title="Register" />
+      <Scene key="home" component={Home} />
     </Stack>
   </Router>
 );
@@ -42,13 +54,13 @@ const App = () => (
 // Login.js
 
 // navigate to 'home' as defined in your top-level router
-Actions.home(PARAMS)
+Actions.home(PARAMS);
 
 // go back (i.e. pop the current screen off the nav stack)
-Actions.pop()
+Actions.pop();
 
 // refresh the current Scene with the specified props
-Actions.refresh({param1: 'hello', param2: 'world'})
+Actions.refresh({ param1: 'hello', param2: 'world' });
 ```
 
 ## API
@@ -71,50 +83,47 @@ yarn
 yarn start
 ```
 
-Installing with npm
-
-```npm install --save react-native-router-flux```
-
-Installing wih yarn
-
-```yarn add react-native-router-flux```
-
 ## v4 Features
-* Based on latest [React Navigation](https://reactnavigation.org) API
-* Separate navigation logic from presentation. You may now change navigation state directly from your business logic code - stores/reducers/etc. navigationStore
-* Built-in state machine (v3 `Switch` replacement)
-  * Each `Scene` with `component` defined can have `onEnter`/`onExit`/`on` handlers.
-  * `onEnter`/`on` handler can be async.
-  * For 'truthy' return of `onEnter`/`on`, `success` handler (if defined) will be executed
-    * if `success` is a string then router will navigate to the `Scene` with that key
-  * in case of handler's failure, `failure` prop (if defined) will be run.
-  * Combining `onEnter`, `onExit`, `success`, and `failure` makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
-* [MobX](https://mobx.js.org/)-friendly: all scenes are wrapped with `observer`. You may subscribe to `navigationStore` (`Actions` in v3) and observe current navigation state. Not applicable to Redux.
-* Flexible Nav bar customization, currently not allowed by React Navigation:
-https://github.com/react-community/react-navigation/issues/779
-* Drawer support (provided by React Navigation)
-* Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding `rightTitle` to a scene will apply to all child scenes simultaneously. See example app.
-* Access to your app navigations state as simple as `Actions.state`.
-* Use `Actions.currentScene` to get name of current scene.
+
+- Based on latest [React Navigation](https://reactnavigation.org) API
+- Separate navigation logic from presentation. You may now change navigation state directly from your business logic code - stores/reducers/etc. navigationStore
+- Built-in state machine (v3 `Switch` replacement)
+  - Each `Scene` with `component` defined can have `onEnter`/`onExit`/`on` handlers.
+  - `onEnter`/`on` handler can be async.
+  - For 'truthy' return of `onEnter`/`on`, `success` handler (if defined) will be executed
+    - if `success` is a string then router will navigate to the `Scene` with that key
+  - in case of handler's failure, `failure` prop (if defined) will be run.
+  - Combining `onEnter`, `onExit`, `success`, and `failure` makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
+- [MobX](https://mobx.js.org/)-friendly: all scenes are wrapped with `observer`. You may subscribe to `navigationStore` (`Actions` in v3) and observe current navigation state. Not applicable to Redux.
+- Flexible Nav bar customization, currently not allowed by React Navigation:
+  https://github.com/react-community/react-navigation/issues/779
+- Drawer support (provided by React Navigation)
+- Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding `rightTitle` to a scene will apply to all child scenes simultaneously. See example app.
+- Access to your app navigations state as simple as `Actions.state`.
+- Use `Actions.currentScene` to get name of current scene.
 
 ### Helpful tips if you run into some gotchas
 
 ## Using Static on Methods with HOCs
-* This is just a helpful tip for anyone who use the onExit/onEnter methods as a static method in their Component Class. Please refer to this link https://reactjs.org/docs/higher-order-components.html.
 
-* If your Scene Components are Wrapped in Custom HOCs/ Decorators, then the static onExit/onEnter methods will not work as your Custom HOCs will not copy the static methods over to your Enhanced Component.Use the npm package called hoist-non-react-statics to copy your Component level static methods over to your Enhanced Component.
+- This is just a helpful tip for anyone who use the onExit/onEnter methods as a static method in their Component Class. Please refer to this link https://reactjs.org/docs/higher-order-components.html.
+
+- If your Scene Components are Wrapped in Custom HOCs/ Decorators, then the static onExit/onEnter methods will not work as your Custom HOCs will not copy the static methods over to your Enhanced Component.Use the npm package called hoist-non-react-statics to copy your Component level static methods over to your Enhanced Component.
 
 ## Implement onBack from your Scene after declaring it
 
-* If you have a Scene where in you want to make some changes to your Component State when Back button is pressed, then doing this 
+- If you have a Scene where in you want to make some changes to your Component State when Back button is pressed, then doing this
+
 ```js
 <Scene key={...} component={...} onBack={()=>{/*code*/}}/>
-``` 
+```
+
 will not help.
 
 ```js
-<Scene key={...} component={...} onBack={()=>{/*code*/}} back={true}/> 
+<Scene key={...} component={...} onBack={()=>{/*code*/}} back={true}/>
 ```
+
 Make sure back = true is passed to your scene, now in your Component's lifecycle add this
 
 ```js
@@ -125,20 +134,17 @@ componentDidMount(){
 }
 ```
 
-
 ## Contributors
 
 This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
 <a href="https://github.com/aksonov/react-native-router-flux/graphs/contributors"><img src="https://opencollective.com/react-native-router-flux/contributors.svg?width=890" /></a>
 
-
 ## Backers
 
 Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-native-router-flux#backer)]
 
 <a href="https://opencollective.com/react-native-router-flux#backers" target="_blank"><img src="https://opencollective.com/react-native-router-flux/backers.svg?width=890"></a>
 
-
 ## Sponsors
 
 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-native-router-flux#sponsor)]

diff --git a/examples/react-native/ios/Podfile.lock b/examples/react-native/ios/Podfile.lock
@@ -81,6 +81,10 @@ PODS:
     - React-Core (= 0.60.5)
   - RNGestureHandler (1.4.1):
     - React
+  - RNReanimated (1.2.0):
+    - React
+  - RNScreens (2.0.0-alpha.3):
+    - React
   - yoga (0.60.5.React)
 
 DEPENDENCIES:
@@ -105,6 +109,8 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -154,6 +160,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/WebSocket"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -180,8 +190,10 @@ SPEC CHECKSUMS:
   React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
   React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
   RNGestureHandler: 4cb47a93019c1a201df2644413a0a1569a51c8aa
+  RNReanimated: 1b52415c4302f198cb581282a0166690bad62c43
+  RNScreens: 402a99b0a27c0c32f079cec12d3ccbd35e20cd7f
   yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
 
 PODFILE CHECKSUM: 427825d45bec91cf181bdca5a1e33480e904ef46
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.6.1
diff --git a/examples/react-native/package.json b/examples/react-native/package.json
@@ -13,7 +13,9 @@
     "react-native-button": "^2.4.0",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-message-bar": "^2.0.10",
-    "react-native-router-flux": "4.1.0-beta.8"
+    "react-native-reanimated": "^1.2.0",
+    "react-native-router-flux": "4.2.0-beta.1",
+    "react-native-screens": "^2.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",