Merge pull request #18 from sergeyshpadyrev/dev

sergeyshpadyrev · web-flow · commit 45a4100204de · 2018-08-27T22:15:43.000+03:00
Release 2.4.0
diff --git a/example/01_push_and_pop/package.json b/example/01_push_and_pop/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/02_pass_params/package.json b/example/02_pass_params/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/03_animation/package.json b/example/03_animation/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/04_pop_to/package.json b/example/04_pop_to/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/05_replace/package.json b/example/05_replace/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/06_replace_to/package.json b/example/06_replace_to/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/07_reset/package.json b/example/07_reset/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/08_tabs/package.json b/example/08_tabs/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/09_custom_animation/package.json b/example/09_custom_animation/package.json
@@ -7,7 +7,7 @@
     "expo": "^28.0.0",
     "react": "^16.4.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
-    "react-native-easy-router": "^2.3.0"
+    "react-native-easy-router": "^2.4.0"
   },
   "devDependencies": {
     "react-native-scripts": "^1.14.0"
diff --git a/example/10_stack_changes/.babelrc b/example/10_stack_changes/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}
diff --git a/example/10_stack_changes/.watchmanconfig b/example/10_stack_changes/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/example/10_stack_changes/App.js b/example/10_stack_changes/App.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import Router from 'react-native-easy-router'
+import { Text, TextInput, View } from 'react-native'
+
+const Screen = ({ router, color, next, type, text }) => (
+  <View
+    style={{
+      alignItems: 'center',
+      backgroundColor: color,
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-around'
+    }}
+  >
+    <Text onPress={() => router[type || 'push'][`Screen${next}`]()}>
+      {text || 'Go to'} screen {next}
+    </Text>
+  </View>
+)
+
+const Screen1 = ({ router }) => <Screen router={router} color="pink" next="2" />
+const Screen2 = ({ router }) => <Screen router={router} color="yellow" next="3" />
+const Screen3 = ({ router }) => <Screen router={router} color="orange" next="1" type="reset" text="Reset to" />
+
+const stackText = stack => JSON.stringify(stack.map(route => parseInt(route.route.substring(6), 10)))
+
+export default class StackChangesExample extends React.Component {
+  state = { 
+    event: '(none)',
+    stackText: '',
+  }
+
+  onBeforeStackChange = (animation, oldStack, newStack) => {
+    this.setState({
+      event: 'onBeforeStackChange',
+      stackText: `${stackText(oldStack)} -> ${stackText(newStack)}`,
+    })
+  }
+
+  onStackChange = stack => {
+    this.setState({
+      event: 'onStackChange',
+      stackText: stackText(stack),
+    })
+  }
+
+  render = () => (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          height: 80,
+          padding: 10,
+          justifyContent: 'flex-end',
+        }}>
+        <Text>
+          {this.state.event}
+          {'\n'}
+          {this.state.stackText}
+        </Text>
+      </View>
+      <Router
+        routes={{ Screen1, Screen2, Screen3 }}
+        initialRoute="Screen1"
+        router={router => this.router = router}
+        onBeforeStackChange={this.onBeforeStackChange}
+        onStackChange={this.onStackChange}
+      />
+    </View>
+  )
+}
diff --git a/example/10_stack_changes/app.json b/example/10_stack_changes/app.json
@@ -0,0 +1,8 @@
+{
+  "expo": {
+    "name": "10_stack_changes",
+    "slug": "stack_changes",
+    "sdkVersion": "28.0.0",
+    "version": "1.0.0"
+  }
+}
diff --git a/example/10_stack_changes/package.json b/example/10_stack_changes/package.json
@@ -0,0 +1,15 @@
+{
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "scripts": {
+    "start": "react-native-scripts start"
+  },
+  "dependencies": {
+    "expo": "^28.0.0",
+    "react": "^16.4.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
+    "react-native-easy-router": "^2.4.0"
+  },
+  "devDependencies": {
+    "react-native-scripts": "^1.14.0"
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-easy-router",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "main": "src/index.js",
   "dependencies": {
     "react-native-animatable-promise": "^1.2.4"
diff --git a/readme.md b/readme.md
@@ -47,6 +47,8 @@ You can see more usage examples in [examples](https://github.com/sergeyshpadyrev
 | initialRoute        | string   | required | initial route name                                   |
 | router              | function |          | function to get router object                        |
 | disableHardwareBack | boolean  |          | don't use Android back button to pop (default false) |
+| onStackChange       | function |          | function called after navigation stack changes       |
+| onBeforeStackChange | function |          | function called before navigation stack changes      |
 
 ```javascript
 // Example
@@ -86,9 +88,10 @@ router.reset.First({value:123}, {type:'top'}).then(() => console.log('Reset'))
 
 | Parameter | Type     | Description                                         |
 | --------- | -------- | --------------------------------------------------- |
-| id        | integer  | Id of route                                         |
+| id        | string   | Id of route                                         |
 | route     | string   | Route name                                          |
 | params    | object   | Parameters passed to screen                         |
+| animation | object   | Animation used to transition to this screen         |
 | pop       | function | Function to pop all screens until this              |
 | replace   | function | Function to replace all screens in stack after this |
 
@@ -147,3 +150,33 @@ The only limitation for custom animations is that the out animation `useNativeDr
 // and then pop with animation like that
 [{ opacity: 1}] }, { opacity:0}, true]
 ```
+
+#### Responding to stack changes
+
+The `onStackChange` event can be used to update your application state or UI when navigation occurs. It receives a single argument, the new stack
+
+```javascript
+// Example
+
+<Router
+  onStackChange={newStack => {
+    // Dispatch the new navigation stack to a store
+    dispatch({type: 'SET_ROUTER_STACK', payload: newStack})
+  }}
+/>
+```
+
+The `onBeforeStackChange` event can be used to synchronise your application UI with router transitions. It receives 3 arguments: the transition animation, the current stack and the target stack
+
+```javascript
+// Example
+
+<Router
+  onBeforeStackChange={(animation, oldStack, newStack) => {
+    // Assign the transition animation and screens to state
+    const fromScreen = fromStack[fromStack.length - 1].route
+    const toScreen = toStack[toStack.length - 1].route
+    this.setState({animation, fromScreen, toScreen})
+  }}
+/>
+```
diff --git a/src/animation.js b/src/animation.js
@@ -44,4 +44,8 @@ export default class Animator {
   start = this.getTypeProperty(0)
   end = this.getTypeProperty(1)
   useNativeDriver = this.getTypeProperty(2)
+  shouldFade = type => {
+    const { opacity, transform } = this.types[type][0]
+    return opacity === undefined || transform !== undefined
+  }
 }
diff --git a/src/hardware.js b/src/hardware.js
@@ -7,8 +7,11 @@ export default class HardwareBack {
   }
 
   handle = () => {
-    if (this.methods.stack.length > 1) this.methods.pop()
-    return true
+    if (this.methods.stack.length > 1) {
+      this.methods.pop()
+      return true
+    }
+    return false
   }
 
   subscribe = () => {
diff --git a/src/index.js b/src/index.js
@@ -8,6 +8,8 @@ import ScreenMethods from './screenMethods'
 import styles from './styles'
 import { View } from 'react-native'
 
+let counter = 0
+
 class Router extends React.Component {
   actions = new Actions()
   animator = new Animator(this.props.animations)
@@ -16,9 +18,10 @@ class Router extends React.Component {
   methods = new Methods(this)
   hardware = new Hardware(this.methods, this.props.disableHardwareBack)
 
-  addScreen = (route, params, animation, onActionFinished, idShift = 0) => {
+  addScreen = (route, params, animation, onActionFinished, idShift = 0, nextStack = undefined) => {
     const index = this.state.stack.length - idShift
-    const id = `${index}-${route}-${parseInt(Math.random() * 10000)}`
+    const id = `${index}-${route}-${counter}`
+    counter += 1
     const Route = this.props.routes[route]
     const screenReferenceHandler = screen => {
       if (!screen) return
@@ -28,24 +31,45 @@ class Router extends React.Component {
       const last = this.state.stack[this.state.stack.length - 1]
       const stack = [...previous, { ...last, methods: { ...methods, id, route, params }, screen }]
 
-      this.setState({ stack }, () => screen.animateIn().then(onActionFinished))
+      this.setTransition(screen.props.animation, this.state.stack, nextStack ? nextStack(stack) : stack)
+      screen.animateIn(stack).then(() => nextStack ? onActionFinished(stack) : this.setStack({ stack }, onActionFinished))
     }
     const screen = (
       <Screen animation={animation} animator={this.animator} key={id} ref={screenReferenceHandler}>
         <Route router={this.methods} {...params} />
       </Screen>
     )
-    this.setState({ stack: [...this.state.stack, screen] })
+    this.setStack({ stack: [...this.state.stack, screen] }, undefined, true)
   }
 
-  componentWillMount = () => {
+  componentDidMount = () => {
+    this._isMounted = true
     this.addScreen(this.props.initialRoute, {}, { type: 'none' })
     this.hardware.subscribe()
 
     if (this.props.router) this.props.router(this.methods)
   }
 
-  componentWillUnmount = () => this.hardware.unsubscribe()
+  componentWillUnmount = () => {
+    this.hardware.unsubscribe()
+    this._isMounted = false
+  }
+
+  setStack = ({ stack }, onFinish, skipProps) => {
+    if (!this._isMounted) return
+    this.setState({ stack }, onFinish)
+    if (!!skipProps || !this.props.onStackChange) return
+    this.props.onStackChange(stack.map(route => route.methods))
+  }
+
+  setTransition = (animation, from, to) => {
+    if (!this.props.onBeforeStackChange) return
+    this.props.onBeforeStackChange(
+      animation,
+      from.map(route => route.methods).filter(route => route),
+      to.map(route => route.methods)
+    )
+  }
 
   render = () => <View style={styles.router}>{this.state.stack}</View>
 }
diff --git a/src/methods.js b/src/methods.js
@@ -9,9 +9,10 @@ export default class Router {
       router.actions.add(onFinish => {
         if (router.state.stack.length === 0) return
 
-        router.state.stack[router.state.stack.length - 1].screen
-          .animateOut(animation)
-          .then(() => router.setState({ stack: router.state.stack.slice(0, -1) }, onFinish))
+        const newStack = router.state.stack.slice(0, -1)
+        const { screen } = router.state.stack[router.state.stack.length - 1]
+        router.setTransition(animation || screen.props.animation, router.state.stack, newStack)
+        screen.animateOut(animation, router.state.stack).then(() => router.setStack({ stack: newStack }, onFinish))
       })
 
     this.push = forAllRoutes(route => (params, animation) =>
@@ -20,20 +21,19 @@ export default class Router {
 
     this.replace = forAllRoutes(route => (params, animation) =>
       router.actions.add(onFinish => {
-        const removeReplacedScreen = () =>
-          router.setState(
-            { stack: [...router.state.stack.slice(0, -2), router.state.stack[router.state.stack.length - 1]] },
-            onFinish
-          )
-        router.addScreen(route, params, animation, removeReplacedScreen, 1)
+        const nextStack = stack => [...stack.slice(0, -2), stack[stack.length - 1]]
+        const removeReplacedScreen = stack =>
+          router.setStack({ stack: nextStack(stack) }, onFinish)
+        router.addScreen(route, params, animation, removeReplacedScreen, 1, nextStack)
       })
     )
 
     this.reset = forAllRoutes(route => (params, animation) =>
       router.actions.add(onFinish => {
-        const removeAllScreens = () =>
-          router.setState({ stack: [router.state.stack[router.state.stack.length - 1]] }, onFinish)
-        router.addScreen(route, params, animation, removeAllScreens, router.state.stack.length)
+        const nextStack = stack => [stack[stack.length - 1]]
+        const removeAllScreens = stack =>
+          router.setStack({ stack: nextStack(stack) }, onFinish)
+        router.addScreen(route, params, animation, removeAllScreens, router.state.stack.length, nextStack)
       })
     )
   }
diff --git a/src/screen.js b/src/screen.js
diff --git a/src/screenMethods.js b/src/screenMethods.js
diff --git a/src/styles.js b/src/styles.js
