Fix bug when adding multiple photos. Added RN image resizer

mobile/android/app/build.gradle

@@ -167,6 +167,7 @@ dependencies {
     compile project(':react-native-maps')
     compile project(':react-native-image-picker')
     compile project(':react-native-fs')
+    compile project(':react-native-image-resizer')
 }
 
 // Run this once to be able to run the application with BUCK

mobile/android/app/src/main/java/com/deightonar/MainApplication.java

@@ -19,6 +19,8 @@ import com.imagepicker.ImagePickerPackage;
 
 import com.rnfs.RNFSPackage;
 
+import fr.bamlab.rnimageresizer.ImageResizerPackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@@ -34,7 +36,8 @@ public class MainApplication extends Application implements ReactApplication {
           new ReactViroPackage(ReactViroPackage.ViroPlatform.GVR),
           new MapsPackage(),
           new ImagePickerPackage(),
-          new RNFSPackage()
+          new RNFSPackage(),
+          new ImageResizerPackage()
       );
     }
 

mobile/android/settings.gradle

@@ -1,7 +1,5 @@
 rootProject.name = 'DeightonAR'
 
-include ':app'
-
 include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
 project(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client')
 project(':gvr_common').projectDir = new File('../node_modules/react-viro/android/gvr_common')
@@ -15,4 +13,9 @@ include ':react-native-image-picker'
 project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
 
 include ':react-native-fs'
-project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
+project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
+
+include ':react-native-image-resizer'
+project(':react-native-image-resizer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-resizer/android')
+
+include ':app'

mobile/ios/DeightonAR.xcodeproj/project.pbxproj

@@ -206,6 +206,7 @@
 				"${PODS_ROOT}/../../node_modules/react-viro/ios/dist/ViroRenderer/ViroKit.framework",
 				"${BUILT_PRODUCTS_DIR}/glog/glog.framework",
 				"${BUILT_PRODUCTS_DIR}/react-native-image-picker/react_native_image_picker.framework",
+				"${BUILT_PRODUCTS_DIR}/react-native-image-resizer/react_native_image_resizer.framework",
 				"${BUILT_PRODUCTS_DIR}/react-native-maps/react_native_maps.framework",
 				"${BUILT_PRODUCTS_DIR}/yoga/yoga.framework",
 			);
@@ -222,6 +223,7 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ViroKit.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_image_picker.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_image_resizer.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_maps.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
 			);

mobile/ios/Podfile

@@ -37,6 +37,8 @@ target 'DeightonAR' do
   pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
 
   pod 'RNFS', :path => '../node_modules/react-native-fs'
+
+  pod 'react-native-image-resizer', :path => '../node_modules/react-native-image-resizer'
 end
 
 # See https://gist.github.com/Jpunt/3fe75effd54a702034b75ff697e47578

mobile/ios/Podfile.lock

@@ -21,6 +21,8 @@ PODS:
     - React/Core (= 0.55.4)
   - react-native-image-picker (0.14.3):
     - React
+  - react-native-image-resizer (1.0.0):
+    - React
   - react-native-maps (0.21.0):
     - React
   - React/Core (0.55.4):
@@ -74,6 +76,7 @@ DEPENDENCIES:
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
+  - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
   - react-native-maps (from `../node_modules/react-native-maps`)
   - React/Core (from `../node_modules/react-native`)
   - React/CxxBridge (from `../node_modules/react-native`)
@@ -110,6 +113,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
+  react-native-image-resizer:
+    :path: "../node_modules/react-native-image-resizer"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   RNFS:
@@ -134,12 +139,13 @@ SPEC CHECKSUMS:
   GVRSDK: 0cb9d0ce06a84d698e61e3db9509766022dcf815
   React: aa2040dbb6f317b95314968021bd2888816e03d5
   react-native-image-picker: 42cfe2c8435d893414f8714a81e480313cb1412b
+  react-native-image-resizer: 04a3409e7d4ad646c4468671c69dec490def139c
   react-native-maps: 066c2afcc89e18726377bcc685315f989ca22449
   RNFS: bbb1a64eb245763daf34aea86f97c97c4e85f74c
   ViroKit: 9631f301ef6a3f56116b23d6aac5d5c2307aa368
   ViroReact: 5520f26ac4654e361786c82da3b29ce0402c3c00
   yoga: a23273df0088bf7f2bb7e5d7b00044ea57a2a54a
 
-PODFILE CHECKSUM: 5c148f4a189f391c884f82181ca6fc7bf1d45d9c
+PODFILE CHECKSUM: a837dc1272326f9c7b9c62b62b4a1e77bf9a7488
 
 COCOAPODS: 1.5.0

mobile/package-lock.json

@@ -5233,6 +5233,11 @@
       "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-0.26.7.tgz",
       "integrity": "sha1-rS7pV/f2zAE5aJPqA9hMsq2y43Y="
     },
+    "react-native-image-resizer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-image-resizer/-/react-native-image-resizer-1.0.0.tgz",
+      "integrity": "sha1-1H4UlDw3k44of71jnk23zrf9iRc="
+    },
     "react-native-iphone-x-helper": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.3.tgz",

mobile/package.json

@@ -27,6 +27,7 @@
     "react-native": "^0.55.4",
     "react-native-fs": "^2.9.12",
     "react-native-image-picker": "^0.26.7",
+    "react-native-image-resizer": "^1.0.0",
     "react-native-iphone-x-helper": "^1.0.3",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-maps": "^0.21.0",

mobile/src/ARViewer/ARViewer.js

@@ -58,7 +58,6 @@ class WorkItemSceneAR extends React.Component {
   @autobind
   handleLoadEnd() {
     this.arScene.getCameraOrientationAsync().then((orientation) => {
-      console.log(orientation)
       return this.arScene
         .performARHitTestWithRay(orientation.forward)
         .then((results) => {

mobile/src/Activity/Activity.js

@@ -235,7 +235,6 @@ export class Activity extends React.Component {
 
   @autobind
   handleUploadProgress(uploadData) {
-    console.log(uploadData)
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(

mobile/src/WorkItem/WorkItem.js

@@ -253,7 +253,6 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleUploadProgress(uploadData) {
-    console.log(uploadData)
     if (this.state.progressModal) {
       this.setState({
         uploadPercent: Math.round(

mobile/src/ui/BoundPhotoPanel.js

@@ -65,7 +65,7 @@ export class BoundPhotoPanel extends Component {
             onUploadStarted()
           }
           api
-            .upload(response.path, this.props.onUploadProgress)
+            .upload(response.path || response.uri, this.props.onUploadProgress)
             .then((uploadData) => {
               if (onUploadEnded) {
                 onUploadEnded(true, uploadData)
@@ -75,7 +75,7 @@ export class BoundPhotoPanel extends Component {
 
               if (binder) {
                 const value = binder.getFieldValue(name)
-                let newValue = typeof value === "array" ? value.slice(0) : []
+                let newValue = value instanceof Array ? value.slice(0) : []
 
                 newValue[index] = uploadData.assetId
 
@@ -110,10 +110,6 @@ export class BoundPhotoPanel extends Component {
     const renderPhoto = (index) => {
       const assetId = assetIds[index]
 
-      if (assetId) {
-        console.log(api.makeImageUrl(assetId))
-      }
-
       return (
         <TouchableOpacity
           key={assetId || "blank" + index.toString()}