hotfix: Example, ReduxExample and depencies fixes for Android (#3195)

Author: daviscabral

.circleci/config.yml

@@ -7,18 +7,17 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "yarn.lock" }}
       - run:
           name: install-dependencies
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
-            - ./node_modules
             - ~/.cache/yarn
       - run:
           name: test
           command: yarn test
       - run:
           name: linter
-          command: yarn eslint
+          command: yarn lint

.eslintrc.js

@@ -57,5 +57,8 @@ module.exports = {
       },
     },
     node: true,
+    react: {
+      version: '16.4.2',
+    },
   },
 };

Example/android/app/build.gradle

@@ -83,13 +83,13 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
 
     defaultConfig {
         applicationId "com.example"
-        minSdkVersion 16
-        targetSdkVersion 22
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
         ndk {
@@ -127,7 +127,7 @@ android {
 
 dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:23.0.1"
+    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
 

Example/android/build.gradle

@@ -3,22 +3,59 @@
 buildscript {
     repositories {
         jcenter()
+        google()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
+        classpath 'com.android.tools.build:gradle:3.0.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
 }
 
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
+
 allprojects {
     repositories {
         mavenLocal()
         jcenter()
+        google()
+        maven { url "https://maven.google.com" }
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
     }
 }
+
+ext {
+    googlePlayServicesVersion = "12.0.1"
+    buildToolsVersion = "26.0.2"
+    minSdkVersion = 16
+    compileSdkVersion = 26
+    targetSdkVersion = 26
+    supportLibVersion = "27.1.0"
+}
+
+
+subprojects {
+    project.configurations.all {
+        resolutionStrategy.eachDependency { details ->
+            if (details.requested.group == 'com.android.support'
+              && !details.requested.name.contains('multidex') ) {
+                details.useVersion rootProject.ext.supportLibVersion
+            }
+        }
+    }
+
+    afterEvaluate {
+        project -> if (project.hasProperty("android")) {
+            android {
+                compileSdkVersion rootProject.ext.compileSdkVersion
+                buildToolsVersion rootProject.ext.buildToolsVersion
+            }
+        }
+    }
+}

Example/android/gradle.properties

@@ -17,4 +17,8 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
+org.gradle.daemon=false
+org.gradle.parallel=false
+org.gradle.configureondemand=false
 android.useDeprecatedNdk=true
+android.enableAapt2=false

Example/android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

Example/babel.config.js

@@ -1,9 +1,8 @@
 module.exports = {
-  presets: [
-    'react-native',
-    'module:metro-react-native-babel-preset',
+  "presets": [
+    "babel-preset-react-native"
   ],
-  plugins: [
-    ['@babel/plugin-proposal-decorators', { legacy: true }],
-  ],
-};
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
+}

Example/components/CustomNavBar2.js

@@ -1,12 +1,10 @@
-import {
-  Image, Platform, StyleSheet, Text, TouchableOpacity, View,
-} from 'react-native';
+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: {
-    height: (Platform.OS === 'ios') ? 64 : 54,
+    height: Platform.OS === 'ios' ? 64 : 54,
     flexDirection: 'row',
     paddingTop: 20,
     backgroundColor: 'green',
@@ -24,32 +22,25 @@ export default class CustomNavBar extends React.Component {
 
   _renderLeft() {
     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 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>
+        <Text>{this.props.title}</Text>
       </View>
     );
   }
 
   render() {
     return (
       <View style={styles.container}>
-        { this._renderLeft() }
-        { this._renderMiddle() }
+        {this._renderLeft()}
+        {this._renderMiddle()}
       </View>
     );
   }

Example/components/CustomNavBarView.js

@@ -1,8 +1,6 @@
 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';
 
@@ -29,10 +27,34 @@ class TabView extends React.Component {
       <View style={[styles.container, this.props.sceneStyle]}>
         <Button onPress={Actions.pop}>Back</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>
-        <Button onPress={() => { Actions.hiddenNavBar(); }}>Switch to Scene with a navBar hidden</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>
+        <Button
+          onPress={() => {
+            Actions.hiddenNavBar();
+          }}
+        >
+          Switch to Scene with a navBar hidden
+        </Button>
       </View>
     );
   }

Example/components/EchoView.js

@@ -23,7 +23,6 @@ const styles = StyleSheet.create({
   },
 });
 
-
 export default class extends React.Component {
   onEnter() {
     console.log('EchoView onEnter');

Example/components/Error.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  View, Text, StyleSheet, Animated, Dimensions,
-} from 'react-native';
+import { View, Text, StyleSheet, Animated, Dimensions } from 'react-native';
 import Button from 'react-native-button';
 import { Actions } from 'react-native-router-flux';
 
@@ -45,16 +43,15 @@ export default class extends React.Component {
 
   render() {
     return (
-      <Animated.View style={[styles.container, { backgroundColor: 'rgba(52,52,52,0.5)' },
-        { transform: [{ translateY: this.state.offset }] }]}
-      >
-        <View style={{
-          width: 250,
-          height: 250,
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: 'white',
-        }}
+      <Animated.View style={[styles.container, { backgroundColor: 'rgba(52,52,52,0.5)' }, { transform: [{ translateY: this.state.offset }] }]}>
+        <View
+          style={{
+            width: 250,
+            height: 250,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'white',
+          }}
         >
           <Text>{this.props.data}</Text>
           <Button onPress={this.closeModal.bind(this)}>Close</Button>

Example/components/Launch.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  View, Text, StyleSheet, Button,
-} from 'react-native';
+import { View, Text, StyleSheet, Button } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import { MessageBarManager } from 'react-native-message-bar';
 
@@ -26,13 +24,15 @@ class Launch extends React.Component {
         <Button title="Go to CustomNavBar page" onPress={() => Actions.customNavBar()} />
         <Button
           title="MessageBar alert"
-          onPress={() => MessageBarManager.showAlert({
-            title: 'Your alert title goes here',
-            message: 'Your alert message goes here',
-            alertType: 'success',
-            // See Properties section for full customization
-            // Or check `index.ios.js` or `index.android.js` for a complete example
-          })}
+          onPress={() =>
+            MessageBarManager.showAlert({
+              title: 'Your alert title goes here',
+              message: 'Your alert message goes here',
+              alertType: 'success',
+              // See Properties section for full customization
+              // Or check `index.ios.js` or `index.android.js` for a complete example
+            })
+          }
         />
         <Button title="Go to TabBar page" onPress={Actions.drawer} />
       </View>

Example/components/Login2.js

@@ -21,7 +21,13 @@ export default class extends React.Component {
         <Text>Login page 2</Text>
         <Text>Title: {title}</Text>
         <Text>Data: {data}</Text>
-        <Button onPress={() => { Actions.pop({ refresh: { data: 'Data after pop', title: 'title after pop' } }); }}>Back and refresh</Button>
+        <Button
+          onPress={() => {
+            Actions.pop({ refresh: { data: 'Data after pop', title: 'title after pop' } });
+          }}
+        >
+          Back and refresh
+        </Button>
         <Button onPress={() => Actions.loginModal3({ data: 'Custom data3', title: 'Custom title3' })}>Login 3</Button>
       </View>
     );

Example/components/TabIcon.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Text,
-} from 'react-native';
+import { Text } from 'react-native';
 
 const propTypes = {
   focused: PropTypes.bool,
@@ -14,11 +12,7 @@ const defaultProps = {
   title: '',
 };
 
-const TabIcon = props => (
-  <Text style={{ color: props.focused ? 'red' : 'black' }}>
-    {props.title}
-  </Text>
-);
+const TabIcon = props => <Text style={{ color: props.focused ? 'red' : 'black' }}>{props.title}</Text>;
 
 TabIcon.propTypes = propTypes;
 TabIcon.defaultProps = defaultProps;

Example/components/TabView.js

@@ -37,7 +37,9 @@ class TabView extends React.Component {
     return (
       <View style={[styles.container, this.props.sceneStyle]}>
         <Text>
-          Tab title:{this.props.title} name:{this.props.name}
+          Tab title:
+          {this.props.title} name:
+          {this.props.name}
         </Text>
         <Text>Tab data: {this.props.data}</Text>
         {this.props.name === 'tab_1_1' && <Button onPress={() => Actions.tab_1_2()}>next screen for tab1_1</Button>}

Example/components/modal/BaseModal.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  View, Text, TouchableOpacity, StyleSheet, Dimensions,
-} from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 
 const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
 
-const BaseModal = ({
-  children, verticalPercent, horizontalPercent, hideClose,
-}) => {
+const BaseModal = ({ children, verticalPercent, horizontalPercent, hideClose }) => {
   const height = verticalPercent ? deviceHeight * verticalPercent : deviceHeight;
   const width = horizontalPercent ? deviceHeight * horizontalPercent : deviceWidth;