CloudBank react-native updates (#447)

* fix metro connect issue

Signed-off-by: Mark Nelson <mark.x.nelson@oracle.com>

* update deps

Signed-off-by: Mark Nelson <mark.x.nelson@oracle.com>

Author: markxnelson

cloudbank/cloudbank-react-native/README.md

@@ -22,14 +22,17 @@ The CloudBank mobile app has the following features:
 
 To use this sample you will require the following:
 
-* Either Android Studio or XCode and a device emulator.  For Android it must be Android version 11.0 Google APIs 30 (for compatibility with react-native tools)
+* Either Android Studio or XCode and a device emulator.  For Android it must be Android version 11.0 Google APIs 30 (for compatibility with react-native tools) - see the [environment setup](https://reactnative.dev/docs/environment-setup) page for more details.
 * NodeJS, version 16.14.2 or later recommended, earlier versions *may* work but are not tested
 * The react-native tools, version 7.0.3 recommended, no other versions are tested
 
 
 ## Building and running
 
-To build the application, open it in Android Studio (or XCode) and use the IDE's build function to perform a full build.  This is important so that 'linking' will be performed for React Native libraries.
+To build the application:
+
+* Run `npm install` to download JavaScript dependencies.
+* Open it in Android Studio (or XCode) and use the IDE's build function to perform a full build.  This is important so that 'linking' will be performed for React Native libraries.  Note:  You may need to run `gradle wrapper` in Android Studio to download the build tools.
 
 To run the application:
 

cloudbank/cloudbank-react-native/android/app/src/main/AndroidManifest.xml

@@ -9,7 +9,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

cloudbank/cloudbank-react-native/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

cloudbank/cloudbank-react-native/android/gradlew

@@ -1,7 +1,7 @@
 #!/bin/sh
 
 #
-# Copyright © 2015-2021 the original authors.
+# Copyright © 2015-2021 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -32,10 +32,10 @@
 #       Busybox and similar reduced shells will NOT work, because this script
 #       requires all of these POSIX shell features:
 #         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
 #
 #   Important for patching:
 #

cloudbank/cloudbank-react-native/components/Accounts/Accounts.js

@@ -103,7 +103,7 @@ const Accounts = props => {
           );
         })
     ) : (
-      <View style={styles.row}>
+      <View style={styles.row} key="0">
         <View style={styles.cell}>
           <Text> </Text>
           <Text>No accounts to display</Text>

cloudbank/cloudbank-react-native/package.json

@@ -12,26 +12,26 @@
   },
   "dependencies": {
     "@parse/react-native": "^0.0.1-alpha.18",
-    "@react-native-async-storage/async-storage": "^1.17.6",
+    "@react-native-async-storage/async-storage": "^1.17.7",
     "@react-native-picker/picker": "^2.4.2",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "parse": "^3.4.2",
-    "react": "17.0.2",
-    "react-native": "0.68.2",
+    "react": "18.2.0",
+    "react-native": "0.69.1",
     "react-native-format-currency": "^0.0.1",
     "react-native-safe-area-context": "^4.3.1",
     "react-native-screens": "^3.13.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.32.0",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.67.0",
-    "react-test-renderer": "17.0.2"
+    "@babel/core": "^7.18.6",
+    "@babel/runtime": "^7.18.6",
+    "@react-native-community/eslint-config": "^3.0.3",
+    "babel-jest": "^28.1.2",
+    "eslint": "^8.18.0",
+    "jest": "^28.1.2",
+    "metro-react-native-babel-preset": "^0.71.2",
+    "react-test-renderer": "18.2.0"
   },
   "jest": {
     "preset": "react-native"