Merge branch 'react-navigation-v2' into dc/react-navigation-v2/replac…

…e-action * react-navigation-v2: small tweaks bump version introduce onStateChange handler to be used instead of createReducer fix navTransparent add onEnter/onExit handlers and automatic transitions fix eslint fix error more eslint fixes fix eslint errors fix error fix eslint fix custom navigators Babel v7, ESlint fixes, React/React Navigation upgrades, mobx removed (aksonov#3142) use WIP RNRF for Example revert RN to 0.55.4 upgrade Example to RN0.56 WIP: migration to react-navigation v2.x (aksonov#3068)
daviscabral · Jul 26, 2018 · fd47951 · fd47951
2 parents 980ff1c + aba39e3
commit fd47951
Show file tree

Hide file tree

Showing 66 changed files with 6,586 additions and 7,032 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,8 +3,13 @@ jobs:
   build:
     working_directory: ~/react-native-router-flux
     docker:
-      - image: circleci/node:7
+      - image: circleci/node:8
     steps:
+      - run:
+          name: temporary-eslint-airbnb-config-install
+          command: |
+            git clone https://github.com/airbnb/javascript.git ~/airbnb-style
+            cd ~/airbnb-style/ && yarn install
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,11 +9,17 @@ module.exports = {
   },
   parser: 'babel-eslint',
   rules: {
+    "no-new-func": "warn",
     "jest/no-disabled-tests": "warn",
     "jest/no-focused-tests": "error",
     "jest/no-identical-title": "error",
     "jest/valid-expect": "error",
-    'react/forbid-prop-types': 0,
+
+    "react/forbid-prop-types": "warn",
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/no-unused-prop-types": "off",
+
     'no-console': 0,
     'new-cap': 0,
     'no-underscore-dangle': 0,
@@ -29,6 +35,8 @@ module.exports = {
         ],
       },
     ],
+    "import/no-cycle": "warn",
+    "import/no-self-import": "warn",
     'react/jsx-filename-extension': [
       1,
       {

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "printWidth": 180,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "trailingComma": "all"
+}
diff --git a/Example/.babelrc b/Example/.babelrc
diff --git a/Example/.gitignore b/Example/.gitignore
@@ -51,3 +51,4 @@ buck-out/
 fastlane/report.xml
 fastlane/Preview.html
 fastlane/screenshots
+node_modules/
diff --git a/Example/Example.js b/Example/Example.js
@@ -1,24 +1,12 @@
 import React from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
+import CardStackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';
+import { Scene, Router, Actions, Reducer, ActionConst, Overlay, Tabs, Modal, Drawer, Stack, Lightbox } from 'react-native-router-flux';
 import Launch from './components/Launch';
 import Register from './components/Register';
 import Login from './components/Login';
 import Login2 from './components/Login2';
 import Login3 from './components/Login3';
-import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
-import {
-  Scene,
-  Router,
-  Actions,
-  Reducer,
-  ActionConst,
-  Overlay,
-  Tabs,
-  Modal,
-  Drawer,
-  Stack,
-  Lightbox,
-} from 'react-native-router-flux';
 import Home from './components/Home';
 import DrawerContent from './components/drawer/DrawerContent';
 import TabView from './components/TabView';
@@ -28,13 +16,15 @@ import MessageBar from './components/MessageBar';
 import ErrorModal from './components/modal/ErrorModal';
 import DemoLightbox from './components/lightbox/DemoLightbox';
 import MenuIcon from './images/menu_burger.png';
-import CustomNavBarView from "./components/CustomNavBarView";
-import CustomNavBar from "./components/CustomNavBar";
-import CustomNavBar2 from "./components/CustomNavBar2";
+import CustomNavBarView from './components/CustomNavBarView';
+import CustomNavBar from './components/CustomNavBar';
+import CustomNavBar2 from './components/CustomNavBar2';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
+    flex: 1,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
     alignItems: 'center',
   },
   tabBarStyle: {
@@ -45,12 +35,8 @@ const styles = StyleSheet.create({
   },
 });
 
-const reducerCreate = params => {
-  const defaultReducer = new Reducer(params);
-  return (state, action) => {
-    console.log('ACTION:', action);
-    return defaultReducer(state, action);
-  };
+const stateHandler = (prevState, newState, action) => {
+  console.log('ACTION:', action);
 };
 
 const getSceneStyle = () => ({
@@ -63,88 +49,34 @@ const getSceneStyle = () => ({
 const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://';
 
 const Example = () => (
-  <Router
-    createReducer={reducerCreate}
-    getSceneStyle={getSceneStyle}
-    uriPrefix={prefix}>
-
+  <Router onStateChange={stateHandler} getSceneStyle={getSceneStyle} uriPrefix={prefix}>
     <Overlay key="overlay">
-      <Modal key="modal"
-        hideNavBar
-        transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}
-      >
+      <Modal key="modal" hideNavBar transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}>
         <Lightbox key="lightbox">
-          <Stack
-            hideNavBar
-            key="root"
-            titleStyle={{ alignSelf: 'center' }}
-          >
+          <Stack hideNavBar key="root" titleStyle={{ alignSelf: 'center' }}>
             <Scene key="echo" back clone component={EchoView} getTitle={({ navigation }) => navigation.state.key} />
             <Scene key="launch" component={Launch} title="Launch" initial />
 
-            <Stack key="customNavBar" hideTabBar titleStyle={{alignSelf: 'center'}}>
-              <Scene
-                key="customNavBar1"
-                title="CustomNavBar 1"
-                navBar={CustomNavBar}
-                component={CustomNavBarView}
-                back
-              />
-              <Scene
-                key="customNavBar2"
-                title="CustomNavBar 2"
-                navBar={CustomNavBar}
-                component={CustomNavBarView}
-                back
-              />
-              <Scene
-                key="customNavBar3"
-                title="Another CustomNavBar"
-                navBar={CustomNavBar2}
-                component={CustomNavBarView}
-                back
-              />
-              <Scene
-                key="hiddenNavBar"
-                title="hiddenNavBar"
-                component={CustomNavBarView}
-                hideNavBar={true}
-                back
-              />
+            <Stack key="customNavBar" hideTabBar titleStyle={{ alignSelf: 'center' }}>
+              <Scene key="customNavBar1" title="CustomNavBar 1" navBar={CustomNavBar} component={CustomNavBarView} back />
+              <Scene key="customNavBar2" title="CustomNavBar 2" navBar={CustomNavBar} component={CustomNavBarView} back />
+              <Scene key="customNavBar3" title="Another CustomNavBar" navBar={CustomNavBar2} component={CustomNavBarView} back />
+              <Scene key="hiddenNavBar" title="hiddenNavBar" component={CustomNavBarView} hideNavBar={true} back />
             </Stack>
 
-            <Stack
-              back
-              backTitle="Back"
-              key="register"
-              duration={0}
-              navTransparent
-            >
+            <Stack back backTitle="Back" key="register" duration={0} navTransparent>
               <Scene key="_register" component={Register} title="Register" />
               <Scene key="register2" component={Register} title="Register2" />
               <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />
             </Stack>
 
-            <Drawer
-              hideNavBar
-              key="drawer"
-              contentComponent={DrawerContent}
-              drawerImage={MenuIcon}
-              drawerWidth={300}
-            >
+            <Drawer hideNavBar key="drawer" contentComponent={DrawerContent} drawerImage={MenuIcon} drawerWidth={300}>
               {/*
                 Wrapper Scene needed to fix a bug where the tabs would
                 reload as a modal ontop of itself
               */}
               <Scene hideNavBar panHandlers={null}>
-                <Tabs
-                  key="tabbar"
-                  swipeEnabled
-                  showLabel={false}
-                  tabBarStyle={styles.tabBarStyle}
-                  activeBackgroundColor="white"
-                  inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
-                >
+                <Tabs key="tabbar" swipeEnabled showLabel={false} tabBarStyle={styles.tabBarStyle} activeBackgroundColor="white" inactiveBackgroundColor="rgba(255, 0, 0, 0.5)">
                   <Stack
                     key="tab_1"
                     title="Tab #1"
@@ -155,56 +87,18 @@ const Example = () => (
                     navigationBarStyle={{ backgroundColor: 'green' }}
                     titleStyle={{ color: 'white', alignSelf: 'center' }}
                   >
-                    <Scene
-                      key="tab_1_1"
-                      component={TabView}
-                      title="Tab #1_1"
-                      onRight={() => alert('Right button')}
-                      rightTitle="Right"
-
-                    />
+                    <Scene key="tab_1_1" component={TabView} title="Tab #1_1" onRight={() => alert('Right button')} rightTitle="Right" />
 
-                    <Scene
-                      key="tab1_2"
-                      component={TabView}
-                      title="Tab #1_2"
-                      back
-                      titleStyle={{ color: 'black', alignSelf: 'center' }}
-                    />
+                    <Scene key="tab1_2" component={TabView} title="Tab #1_2" back titleStyle={{ color: 'black', alignSelf: 'center' }} />
                   </Stack>
 
-                  <Stack
-                    key="tab_2"
-                    title="Tab #2"
-                    icon={TabIcon}
-                    initial
-                  >
-                    <Scene
-                      key="tab_2_1"
-                      component={TabView}
-                      title="Tab #2_1"
-                      renderRightButton={() => <Text>Right</Text>}
-                    />
-                    <Scene
-                      key="tab_2_2"
-                      component={TabView}
-                      title="Tab #2_2"
-                      onBack={() => alert('onBack button!')}
-                      hideDrawerButton
-                      backTitle="Back!"
-                      panHandlers={null}
-                    />
+                  <Stack key="tab_2" title="Tab #2" icon={TabIcon} initial>
+                    <Scene key="tab_2_1" component={TabView} title="Tab #2_1" renderRightButton={() => <Text>Right</Text>} />
+                    <Scene key="tab_2_2" component={TabView} title="Tab #2_2" onBack={() => alert('onBack button!')} hideDrawerButton backTitle="Back!" panHandlers={null} />
                   </Stack>
 
                   <Stack key="tab_3">
-                    <Scene
-                      key="tab_3_1"
-                      component={TabView}
-                      title="Tab #3"
-                      icon={TabIcon}
-                      rightTitle="Right3"
-                      onRight={() => { }}
-                    />
+                    <Scene key="tab_3_1" component={TabView} title="Tab #3" icon={TabIcon} rightTitle="Right3" onRight={() => {}} />
                   </Stack>
                   <Scene key="tab_4_1" component={TabView} title="Tab #4" hideNavBar icon={TabIcon} />
                   <Stack key="tab_5">
@@ -219,30 +113,9 @@ const Example = () => (
         </Lightbox>
         <Scene key="error" component={ErrorModal} />
         <Stack key="login" path="login/:data" titleStyle={{ alignSelf: 'center' }}>
-          <Scene
-            key="loginModal"
-            component={Login}
-            title="Login"
-            onExit={() => console.log('onExit')}
-            leftTitle="Cancel"
-            onLeft={Actions.pop}
-          />
-          <Scene
-            key="loginModal2"
-            component={Login2}
-            title="Login2"
-            backTitle="Back"
-            panHandlers={null}
-            duration={1}
-          />
-          <Scene
-            key="loginModal3"
-            hideNavBar
-            component={Login3}
-            title="Login3"
-            panHandlers={null}
-            duration={1}
-          />
+          <Scene key="loginModal" component={Login} title="Login" onExit={() => console.log('onExit')} leftTitle="Cancel" onLeft={Actions.pop} />
+          <Scene key="loginModal2" component={Login2} title="Login2" backTitle="Back" panHandlers={null} duration={1} />
+          <Scene key="loginModal3" hideNavBar component={Login3} title="Login3" panHandlers={null} duration={1} />
         </Stack>
       </Modal>
 

diff --git a/Example/babel.config.js b/Example/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    'react-native',
+    'module:metro-react-native-babel-preset',
+  ],
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+  ],
+};