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

.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" }}

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>

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 }],
+  ],
+};

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>
+    );
   }
 }

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>
+    );
   }
 }

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>

Example/components/EchoView.js

@@ -1,40 +1,40 @@
 import React from 'react';
-import {View, Text, StyleSheet} from "react-native";
-import Button from "react-native-button";
-import {Actions} from "react-native-router-flux";
+import { View, Text, StyleSheet } from 'react-native';
+import Button from 'react-native-button';
+import { Actions } from 'react-native-router-flux';
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#F5FCFF",
-        borderWidth: 2,
-        borderColor: 'red',
-    },
-    instructions: {
-        textAlign: "center",
-        color: "#333333",
-        marginBottom: 5,
-    },
-    smaller: {
-        marginBottom: 5,
-        fontSize: 12,
-    },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+    borderWidth: 2,
+    borderColor: 'red',
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+  smaller: {
+    marginBottom: 5,
+    fontSize: 12,
+  },
 });
 
 
 export default class extends React.Component {
   onEnter() {
     console.log('EchoView onEnter');
   }
-  render(){
-      return (
-          <View style={[styles.container, this.props.sceneStyle]}>
-              <Text style={styles.instructions}>routeName: {this.props.name}</Text>
-              <Button onPress={Actions.pop}>pop</Button>
-          </View>
-      );
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.sceneStyle]}>
+        <Text style={styles.instructions}>routeName: {this.props.name}</Text>
+        <Button onPress={Actions.pop}>pop</Button>
+      </View>
+    );
   }
 }
-