chore(git): merge branch 'next'

.eslintignore

@@ -1,3 +1,3 @@
-**/__tests__/**
 **/flow-typed/**
 **/node_modules/**
+**/examples/**

.eslintrc

@@ -1,43 +1,25 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
-  },
+  "extends": [
+    "airbnb",
+    "plugin:flowtype/recommended"
+  ],
   "plugins": [
     "babel",
-    "react"
+    "react",
+    "flowtype"
   ],
   "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true
+    "jest": true,
+    "node": true
   },
   "globals": {
-    "React$Element": true,
-    "ReactClass": true,
-    "__DEV__": true,
-    "describe": true,
-    "expect": true,
-    "it": true
+    "__DEV__": true
   },
   "rules": {
     "semi": [2, "never"],
-    "no-floating-decimal": 0,
-    "react/jsx-boolean-value": 0,
-    "import/no-unresolved": 0,
-    "react/sort-comp": 0,
-    "react/prop-types": 0,
-    "arrow-body-style": 0,
-    "no-return-assign": 0,
-    "radix": ["error", "as-needed"],
     "react/jsx-filename-extension": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/prefer-default-export": 0,
-    "import/extensions": 0,
-    "no-unused-expressions": 0,
-    "react/no-unescaped-entities": 0,
-    "arrow-parens": 0
+    "react/sort-comp": 0,
+    "arrow-body-style": 0
   }
 }

.flowconfig

@@ -25,6 +25,7 @@ node_modules/react-native/flow
 flow/
 
 [options]
+emoji=true
 module.system=haste
 
 experimental.strict_type_args=true
@@ -37,11 +38,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.37.0
+^0.38.0

README.md

@@ -9,12 +9,12 @@ and `react-native-tab-view`.
 <img src="https://raw.githubusercontent.com/LeoLeBras/react-router-navigation/master/docs/bottom-navigation.gif" width="250">
 
 ## Highlights
-* Just an add-on to ```react-router```
-* Declarative composability.
+* **Just an add-on to ```react-router```**
+* Declarative composability
 * Allow you to call transitions anywhere in your code with simple components
 * Dynamic Routing
 * URL Driven Development
-* Easy-to-use navigation solution
+* Easy-to-use navigation solution using ```react-navigation```
 * Tab Bar Support using ```react-native-tab-view```
 * Cross-platform
 * First class deep linking support
@@ -23,26 +23,25 @@ and `react-native-tab-view`.
 ## How to use
 Install:
 ```shell
-$ yarn add react-router@4.0.0-beta.5 react-router-native@4.0.0-beta.5 react-router-navigation
+$ yarn add react-router react-router-native react-router-navigation
 ```
 
 And then, enjoy it:
 ```js
 import React from 'react'
 import { Text } from 'react-native'
-import { Route } from 'react-router'
 import { NativeRouter, Link } from 'react-router-native'
-import { Navigation } from 'react-router-navigation'
+import { Navigation, Card } from 'react-router-navigation'
 
 const App = () => (
   <NativeRouter>
     <Navigation>
-      <Route
+      <Card
         exact
         path="/"
         render={() => <Link to="/hello">Press it</Link>}
       />
-      <Route
+      <Card
         path="/hello"
         render={() => <Text>Hello</Text>}
       />

examples/Basic/package.json

@@ -8,8 +8,8 @@
   "dependencies": {
     "react": "^15.4.1",
     "react-native": "^0.41.1",
-    "react-router": "4.0.0-beta.5",
-    "react-router-native": "4.0.0-beta.5",
+    "react-router": "4.0.0",
+    "react-router-native": "4.0.0",
     "react-router-navigation": "file:./../../"
   }
 }

examples/Basic/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native'
 import { Switch, Route, Redirect } from 'react-router'
 import { NativeRouter, Link, DeepLinking } from 'react-router-native'
 import { Navigation, Card, Tabs, Tab } from 'react-router-navigation'
@@ -8,80 +8,100 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  scene: {
+    flex: 1,
+    padding: 18,
+  },
+  tabs: {
+    backgroundColor: 'rgb(226, 68, 68)',
+  },
+  indicator: {
+    backgroundColor: 'white',
+  },
 })
 
 export default () => (
   <NativeRouter>
     <View style={styles.container}>
-      <DeepLinking />
-      <Navigation>
-        <Card
-          exact
-          path="/"
-          render={() => (
-            <View style={styles.container}>
-              <Text>Index</Text>
-              <Link to="/yolo">
-                <Text>Push to a new scene</Text>
-              </Link>
-            </View>
-          )}
-        />
-        <Card
-          path="/yolo"
-          component={() => (
-            <View style={styles.container}>
-              <Text>Yolo</Text>
-              <Link to="/hello">
-                <Text>Push to tabs</Text>
-              </Link>
-            </View>
-          )}
-          title="Yolo"
-        />
-        <Card
-          path="/hello"
-          title="Hello"
-          render={({ match: { url } }) => (
-            <Switch>
-              <Route
-                exact
-                path={url}
-                render={() => <Redirect to={`${url}/one`} />}
-              />
-              <Tabs style={styles.container}>
-                <Tab
-                  path={`${url}/one`}
-                  label="One"
-                  render={() => (
-                    <View style={styles.container}>
-                      <Text>One</Text>
-                    </View>
-                  )}
-                />
-                <Tab
-                  path={`${url}/two`}
-                  label="Two"
-                  render={() => (
-                    <View style={styles.container}>
-                      <Text>Two</Text>
-                    </View>
-                  )}
+      <DeepLinking>
+        <Navigation
+          backButtonTintColor="red"
+        >
+          <Card
+            exact
+            path="/"
+            title="Index"
+            render={() => (
+              <View style={styles.scene}>
+                <Link component={TouchableOpacity} to="/yolo">
+                  <Text>Push a new scene</Text>
+                </Link>
+              </View>
+            )}
+          />
+          <Card
+            path="/yolo"
+            component={() => (
+              <View style={styles.scene}>
+                <Link component={TouchableOpacity} to="/hello">
+                  <Text>Push tabs</Text>
+                </Link>
+              </View>
+            )}
+            title="Yolo"
+          />
+          <Card
+            path="/hello"
+            title="Hello"
+            render={({ staticMatch: { url } }) => (
+              <Switch>
+                <Route
+                  exact
+                  path={url}
+                  render={() => <Redirect to={`${url}/one`} />}
                 />
-                <Tab
-                  path={`${url}/three`}
-                  label="Three"
+                <Route
                   render={() => (
-                    <View style={styles.container}>
-                      <Text>Three</Text>
-                    </View>
+                    <Tabs
+                      style={styles.container}
+                      tabBarStyle={styles.tabs}
+                      tabBarIndicatorStyle={styles.indicator}
+                    >
+                      <Tab
+                        path={`${url}/one`}
+                        label="One"
+                        render={() => (
+                          <View style={styles.scene}>
+                            <Text>One</Text>
+                          </View>
+                        )}
+                      />
+                      <Tab
+                        path={`${url}/two`}
+                        label="Two"
+                        render={() => (
+                          <View style={styles.scene}>
+                            <Text>Two</Text>
+                          </View>
+                        )}
+                      />
+                      <Tab
+                        path={`${url}/three`}
+                        label="Three"
+                        render={() => (
+                          <View style={styles.scene}>
+                            <Text>Three</Text>
+                          </View>
+                        )}
+                      />
+                    </Tabs>
                   )}
                 />
-              </Tabs>
-            </Switch>
-          )}
-        />
-      </Navigation>
+              </Switch>
+            )}
+          />
+        </Navigation>
+      </DeepLinking>
     </View>
   </NativeRouter>
 )

examples/Huge/package.json

@@ -8,8 +8,8 @@
     "react": "^15.4.1",
     "react-native": "^0.41.1",
     "react-redux": "^5.0.2",
-    "react-router": "4.0.0-beta.5",
-    "react-router-native": "4.0.0-beta.5",
+    "react-router": "4.0.0",
+    "react-router-native": "4.0.0",
     "react-router-navigation": "file:./../../",
     "redux": "^3.6.0"
   }

examples/Huge/src/app/components/Modal/index.js

@@ -0,0 +1,65 @@
+import React, { Component, createElement } from 'react'
+import { Animated, Dimensions, TouchableOpacity, View, Text } from 'react-native'
+import { withRouter } from 'react-router'
+import styles from './styles'
+
+class Modal extends Component {
+
+  constructor(props) {
+    super(props)
+    const { location: { state } } = props
+    const isOpen = state && state.modal && state.modal.isOpen
+    this.pan = new Animated.Value(isOpen ? 1 : 0)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { location: { state } } = nextProps
+    const isOpen = state && state.modal && state.modal.isOpen
+    Animated.timing(this.pan, {
+      toValue: isOpen ? 1 : 0,
+      duration: 375,
+      delay: isOpen ? 20 : 0,
+    })
+  }
+
+  render() {
+    const { renderContent, location: { pathname }, history } = this.props
+    const top = this.pan.interpolate({
+      inputRange: [0, 1],
+      outputRange: [Dimensions.get('window').height, 0],
+    })
+    return (
+      <View style={styles.container}>
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.overlay,
+            { opacity: this.pan },
+          ]}
+        />
+        <Animated.View
+          style={[
+            styles.wrapper,
+            { top },
+          ]}
+        >
+          <View style={styles.modal}>
+            {createElement(renderContent)}
+            <TouchableOpacity
+              onPress={() => history.replace(
+                pathname,
+                { modal: { isOpen: false } },
+              )}
+            >
+              <Text style={styles.close}>
+                Close
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </View>
+    )
+  }
+}
+
+export default withRouter(Modal)