Babel v7, ESlint fixes, React/React Navigation upgrades, mobx removed (…

…#3142) * Link to docs and example app in README (#3135) * Babel v7, ESlint fixes, React/React Navigation upgrades, mobx removed * Test circleci config * Typo * Bump node version * Fix missing dep * Test fixes * Wrong deps * Update lockfiles * Update lockfiles * get rid of dist * Tab updates and more lint fixes * Test fix * Fix navigatonStore.reset and more lint errors * Warning for those rules while we are still moving things
aksonov · Jul 24, 2018 · 49b8991 · 49b8991
1 parent 1c386f5
commit 49b8991
Show file tree

Hide file tree

Showing 59 changed files with 5,978 additions and 5,620 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
@@ -13,7 +13,12 @@ module.exports = {
     "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 +34,8 @@ module.exports = {
         ],
       },
     ],
+    "import/no-cycle": "warn",
+    "import/no-self-import": "warn",
     'react/jsx-filename-extension': [
       1,
       {

diff --git a/Example/.babelrc b/Example/.babelrc
diff --git a/Example/Example.js b/Example/Example.js
@@ -1,12 +1,16 @@
 import React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+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/StackView/StackViewStyleInterpolator';
-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';
@@ -35,7 +39,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const reducerCreate = params => {
+const reducerCreate = (params) => {
   const defaultReducer = new Reducer(params);
   return (state, action) => {
     console.log('ACTION:', action);
@@ -68,7 +72,7 @@ const Example = () => (
         <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 />
+        <Scene key="hiddenNavBar" title="hiddenNavBar" component={CustomNavBarView} hideNavBar back />
       </Stack>
 
       <Stack back backTitle="Back" key="register" duration={0} navTransparent>

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 }],
+  ],
+};
diff --git a/Example/components/CustomNavBar.js b/Example/components/CustomNavBar.js
@@ -1,6 +1,8 @@
-import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import React from 'react'
-import { Actions } from 'react-native-router-flux'
+import {
+  Image, Platform, StyleSheet, Text, TouchableOpacity, View,
+} from 'react-native';
+import React from 'react';
+import { Actions } from 'react-native-router-flux';
 
 const styles = StyleSheet.create({
   container: {
@@ -10,12 +12,11 @@ const styles = StyleSheet.create({
   },
   navBarItem: {
     flex: 1,
-    justifyContent: 'center'
-  }
-})
+    justifyContent: 'center',
+  },
+});
 
 export default class CustomNavBar extends React.Component {
-
   // constructor(props) {
   //   super(props)
   // }
@@ -25,72 +26,79 @@ export default class CustomNavBar extends React.Component {
       return (
         <TouchableOpacity
           onPress={() => console.log('Hamburger button pressed')}
-          style={[styles.navBarItem, { paddingLeft: 10}]}>
+          style={[styles.navBarItem, { paddingLeft: 10 }]}
+        >
           <Image
-            style={{width: 30, height: 50}}
+            style={{ width: 30, height: 50 }}
             resizeMode="contain"
-            source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png'}}></Image>
+            source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png' }}
+          />
         </TouchableOpacity>
-      )
-    } else {
-      return (
-        <TouchableOpacity
-          onPress={Actions.pop}
-          style={[styles.navBarItem, { paddingLeft: 10}]}>
-          <Image
-            style={{width: 30, height: 50}}
-            resizeMode="contain"
-            source={{uri: 'https://image.flaticon.com/icons/png/512/0/340.png'}}></Image>
-        </TouchableOpacity>
-      )
+      );
     }
+    return (
+      <TouchableOpacity
+        onPress={Actions.pop}
+        style={[styles.navBarItem, { paddingLeft: 10 }]}
+      >
+        <Image
+          style={{ width: 30, height: 50 }}
+          resizeMode="contain"
+          source={{ uri: 'https://image.flaticon.com/icons/png/512/0/340.png' }}
+        />
+      </TouchableOpacity>
+    );
   }
 
   _renderMiddle() {
     return (
       <View style={styles.navBarItem}>
         <Text>{ this.props.title }</Text>
       </View>
-    )
+    );
   }
 
   _renderRight() {
     return (
       <View style={[styles.navBarItem, { flexDirection: 'row', justifyContent: 'flex-end' }]}>
         <TouchableOpacity
           onPress={() => console.log('Share')}
-          style={{ paddingRight: 10}}>
+          style={{ paddingRight: 10 }}
+        >
           <Image
-            style={{width: 30, height: 50}}
+            style={{ width: 30, height: 50 }}
             resizeMode="contain"
-            source={{uri: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/share-512.png'}}></Image>
+            source={{ uri: 'https://cdn3.iconfinder.com/data/icons/glypho-free/64/share-512.png' }}
+          />
         </TouchableOpacity>
         <TouchableOpacity
           onPress={() => console.log('Search')}
-          style={{ paddingRight: 10 }}>
+          style={{ paddingRight: 10 }}
+        >
           <Image
-            style={{width: 30, height: 50}}
+            style={{ width: 30, height: 50 }}
             resizeMode="contain"
-            source={{uri: 'https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic//search1600.png'}}></Image>
+            source={{ uri: 'https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic//search1600.png' }}
+          />
         </TouchableOpacity>
       </View>
-    )
+    );
   }
 
   render() {
-    let dinamicStyle = {}
+    let dinamicStyle = {};
     if (Actions.currentScene === 'customNavBar1') {
-      dinamicStyle = { backgroundColor: 'red'}
+      dinamicStyle = { backgroundColor: 'red' };
     } else {
-      dinamicStyle = { backgroundColor: 'yellow'}
+      dinamicStyle = { backgroundColor: 'yellow' };
     }
 
     return (
-        <View style={[styles.container, dinamicStyle]}>
-          { this._renderLeft() }
-          { this._renderMiddle() }
-          { this._renderRight() }
-        </View>
-    )
+      <View style={[styles.container, dinamicStyle]}>
+        { this._renderLeft() }
+        { this._renderMiddle() }
+        { this._renderRight() }
+      </View>
+    );
   }
 }
diff --git a/Example/components/CustomNavBar2.js b/Example/components/CustomNavBar2.js
@@ -1,6 +1,8 @@
-import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import React from 'react'
-import { Actions } from 'react-native-router-flux'
+import {
+  Image, Platform, StyleSheet, Text, TouchableOpacity, View,
+} from 'react-native';
+import React from 'react';
+import { Actions } from 'react-native-router-flux';
 
 const styles = StyleSheet.create({
   container: {
@@ -11,12 +13,11 @@ const styles = StyleSheet.create({
   },
   navBarItem: {
     flex: 1,
-    justifyContent: 'center'
-  }
-})
+    justifyContent: 'center',
+  },
+});
 
 export default class CustomNavBar extends React.Component {
-
   // constructor(props) {
   //   super(props)
   // }
@@ -25,29 +26,31 @@ export default class CustomNavBar extends React.Component {
     return (
       <TouchableOpacity
         onPress={Actions.pop}
-        style={[styles.navBarItem, { paddingLeft: 10}]}>
+        style={[styles.navBarItem, { paddingLeft: 10 }]}
+      >
         <Image
-          style={{width: 30, height: 50}}
+          style={{ width: 30, height: 50 }}
           resizeMode="contain"
-          source={{uri: 'https://image.flaticon.com/icons/png/512/0/340.png'}}></Image>
+          source={{ uri: 'https://image.flaticon.com/icons/png/512/0/340.png' }}
+        />
       </TouchableOpacity>
-    )
+    );
   }
 
   _renderMiddle() {
     return (
       <View style={styles.navBarItem}>
         <Text>{ this.props.title }</Text>
       </View>
-    )
+    );
   }
 
   render() {
     return (
-        <View style={styles.container}>
-          { this._renderLeft() }
-          { this._renderMiddle() }
-        </View>
-    )
+      <View style={styles.container}>
+        { this._renderLeft() }
+        { this._renderMiddle() }
+      </View>
+    );
   }
 }
diff --git a/Example/components/CustomNavBarView.js b/Example/components/CustomNavBarView.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, Text, View, ViewPropTypes} from 'react-native';
+import {
+  StyleSheet, Text, View, ViewPropTypes,
+} from 'react-native';
 import Button from 'react-native-button';
 import { Actions } from 'react-native-router-flux';
 
@@ -24,9 +26,9 @@ const styles = StyleSheet.create({
 class TabView extends React.Component {
   render() {
     return (
-      <View style={[styles.container, this.props.sceneStyle ]}>
+      <View style={[styles.container, this.props.sceneStyle]}>
         <Button onPress={Actions.pop}>Back</Button>
-        <Button onPress={() => Actions.replace('launch') }>Welcome Page</Button>
+        <Button onPress={() => Actions.replace('launch')}>Welcome Page</Button>
         <Button onPress={() => { Actions.customNavBar1(); }}>Switch to Scene with CustomNavBar #1</Button>
         <Button onPress={() => { Actions.customNavBar2(); }}>Switch to Scene with CustomNavBar #2</Button>
         <Button onPress={() => { Actions.customNavBar3(); }}>Switch to Scene with different CustomNavBar </Button>