Upgrade app to latest RN and packages

Author: spencercarli

.editorconfig

@@ -1,8 +1,4 @@
 module.exports = {
   root: true,
-  extends: 'handlebarlabs',
-  rules: {
-    'import/extensions': 0,
-    'react/state-in-constructor': 0,
-  },
+  extends: '@react-native-community',
 };

.eslintrc.js

@@ -11,6 +11,8 @@ node_modules/react-native/Libraries/polyfills/.*
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
+.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -23,11 +25,10 @@ node_modules/react-native/flow/
 [options]
 emoji=true
 
-esproposal.optional_chaining=enable
-esproposal.nullish_coalescing=enable
-
 exact_by_default=true
 
+format.bracket_spacing=false
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -63,4 +64,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.137.0
+^0.170.0

.flowconfig

@@ -1,3 +1,5 @@
+legacy/
+
 # OSX
 #
 .DS_Store
@@ -28,6 +30,7 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
 
 # node.js
 #
@@ -55,5 +58,6 @@ buck-out/
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/

.gitattributes

@@ -1,7 +1,7 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  arrowParens: 'avoid',
 };

.gitignore

@@ -1,41 +1,41 @@
-import React from "react";
-import { View, StyleSheet, Dimensions, Image } from "react-native";
+import React from 'react';
+import {View, StyleSheet, Dimensions, Image} from 'react-native';
 
-const screen = Dimensions.get("window");
+const screen = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   container: {
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   circle: {
-    backgroundColor: "#ff4136",
+    backgroundColor: '#ff4136',
     width: screen.width / 2,
     height: screen.width / 2,
     borderRadius: screen.width / 2,
-    alignItems: "center",
-    justifyContent: "center"
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   circleCorrect: {
-    backgroundColor: "#28A125"
+    backgroundColor: '#28A125',
   },
   icon: {
-    width: screen.width / 3
-  }
+    width: screen.width / 3,
+  },
 });
 
-export const Alert = ({ correct, visible }) => {
+export const Alert = ({correct, visible}) => {
   if (!visible) return null;
 
   const icon = correct
-    ? require("../assets/check.png")
-    : require("../assets/close.png");
+    ? require('../assets/check.png')
+    : require('../assets/close.png');
 
   const circleStyles = [styles.circle];
 

.prettierrc.js

@@ -1,35 +1,35 @@
-import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import React from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
     borderRadius: 10,
     paddingVertical: 15,
-    alignItems: "center",
-    justifyContent: "center",
-    width: "46%",
-    marginTop: 20
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '46%',
+    marginTop: 20,
   },
   text: {
-    color: "#fff",
+    color: '#fff',
     fontSize: 20,
-    textAlign: "center"
+    textAlign: 'center',
   },
   buttonContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+    flexDirection: 'row',
+    flexWrap: 'wrap',
     marginTop: 20,
-    justifyContent: "space-between"
-  }
+    justifyContent: 'space-between',
+  },
 });
 
-export const Button = ({ text, onPress = () => {} }) => (
+export const Button = ({text, onPress = () => {}}) => (
   <TouchableOpacity onPress={onPress} style={styles.button}>
     <Text style={styles.text}>{text}</Text>
   </TouchableOpacity>
 );
 
-export const ButtonContainer = ({ children }) => (
+export const ButtonContainer = ({children}) => (
   <View style={styles.buttonContainer}>{children}</View>
 );

App/components/Alert.js

@@ -1,23 +1,23 @@
-import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import React from 'react';
+import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   row: {
     paddingHorizontal: 15,
     paddingVertical: 20,
-    backgroundColor: "#36B1F0",
-    marginBottom: 1
+    backgroundColor: '#36B1F0',
+    marginBottom: 1,
   },
   text: {
     fontSize: 18,
-    color: "#fff",
-    fontWeight: "600"
-  }
+    color: '#fff',
+    fontWeight: '600',
+  },
 });
 
-export const RowItem = ({ onPress = () => {}, name, color }) => (
+export const RowItem = ({onPress = () => {}, name, color}) => (
   <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
-    <View style={[styles.row, { backgroundColor: color }]}>
+    <View style={[styles.row, {backgroundColor: color}]}>
       <Text style={styles.text}>{name}</Text>
     </View>
   </TouchableOpacity>

App/components/Button.js

@@ -2,21 +2,21 @@ const questions = [
   {
     question: "What is localhost's IP address?",
     answers: [
-      { id: "1", text: "192.168.1.1" },
-      { id: "2", text: "127.0.0.1", correct: true },
-      { id: "3", text: "209.85.231.104" },
-      { id: "4", text: "66.220.149.25" }
-    ]
+      {id: '1', text: '192.168.1.1'},
+      {id: '2', text: '127.0.0.1', correct: true},
+      {id: '3', text: '209.85.231.104'},
+      {id: '4', text: '66.220.149.25'},
+    ],
   },
   {
-    question: "What kind of fruit was used to name a computer in 1984?",
+    question: 'What kind of fruit was used to name a computer in 1984?',
     answers: [
-      { id: "1", text: "Blackberry" },
-      { id: "2", text: "Blueberry" },
-      { id: "3", text: "Pear" },
-      { id: "4", text: "Apple", correct: true }
-    ]
-  }
+      {id: '1', text: 'Blackberry'},
+      {id: '2', text: 'Blueberry'},
+      {id: '3', text: 'Pear'},
+      {id: '4', text: 'Apple', correct: true},
+    ],
+  },
 ];
 
 export default questions;