Added photo picker on Android

mobile/android/app/app.iml

@@ -150,5 +150,6 @@
     <orderEntry type="library" exported="" name="Gradle: arcore_client::null" level="project" />
     <orderEntry type="library" exported="" name="Gradle: com.facebook.fresco:imagepipeline-1.3.0" level="project" />
     <orderEntry type="module" module-name="react-native-maps" exported="" />
+    <orderEntry type="module" module-name="react-native-image-picker" exported="" />
   </component>
 </module>

mobile/android/app/build.gradle

@@ -164,6 +164,7 @@ dependencies {
     compile 'com.amazonaws:aws-android-sdk-cognito:2.2.+'
     compile 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.2.+'
     compile project(':react-native-maps')
+    compile project(':react-native-image-picker')
 }
 
 // Run this once to be able to run the application with BUCK

mobile/android/app/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 
     <uses-sdk
         android:minSdkVersion="23"

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

@@ -15,6 +15,8 @@ import com.viromedia.bridge.ReactViroPackage;
 
 import com.airbnb.android.react.maps.MapsPackage;
 
+import com.imagepicker.ImagePickerPackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@@ -26,9 +28,10 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
+          new MainReactPackage(),
           new ReactViroPackage(ReactViroPackage.ViroPlatform.GVR),
           new MapsPackage(),
-          new MainReactPackage()
+          new ImagePickerPackage()
       );
     }
 

mobile/android/settings.gradle

@@ -10,3 +10,6 @@ project(':react_viro').projectDir = new File('../node_modules/react-viro/android
 
 include ':react-native-maps'
 project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
+
+include ':react-native-image-picker'
+project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

mobile/package-lock.json

@@ -5418,6 +5418,11 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-native-image-picker": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-0.26.7.tgz",
+      "integrity": "sha1-rS7pV/f2zAE5aJPqA9hMsq2y43Y="
+    },
     "react-native-iphone-x-helper": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.2.tgz",

mobile/package.json

@@ -26,6 +26,7 @@
     "react": "^16.2.0",
     "react-form-binder": "^1.2.0",
     "react-native": "^0.49.3",
+    "react-native-image-picker": "^0.26.7",
     "react-native-iphone-x-helper": "^1.0.2",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-maps": "^0.20.1",

mobile/src/Home/Home.js

@@ -47,6 +47,7 @@ export class Home extends React.Component {
       [
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         PermissionsAndroid.PERMISSIONS.CAMERA,
+        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
       ],
       {
         title: versionInfo.title,

mobile/src/ui/PhotoPanel.js

@@ -8,6 +8,7 @@ import {
   Dimensions,
 } from "react-native"
 import { Icon } from "."
+import ImagePicker from "react-native-image-picker"
 import autobind from "autobind-decorator"
 
 const getScreenPortraitDimensions = () => {
@@ -20,6 +21,36 @@ const getScreenPortraitDimensions = () => {
 }
 
 export class PhotoPanel extends Component {
+  @autobind
+  handlePhotoPress() {
+    ImagePicker.showImagePicker(
+      {
+        title: "Select Photo",
+        storageOptions: {
+          skipBackup: true,
+          path: "photos",
+        },
+      },
+      (response) => {
+        console.log("Response = ", response)
+
+        if (response.didCancel) {
+          console.log("User cancelled image picker")
+        } else if (response.error) {
+          console.log("ImagePicker Error: ", response.error)
+        } else if (response.customButton) {
+          console.log("User tapped custom button: ", response.customButton)
+        } else {
+          let source = { uri: response.uri }
+
+          // You can also display the image using data:
+          // let source = { uri: 'data:image/jpeg;base64,' + response.data };
+          console.log(source)
+        }
+      }
+    )
+  }
+
   render() {
     const { screenWidth, screenHeight } = getScreenPortraitDimensions()
     const photoWidth = screenHeight / 4
@@ -62,7 +93,8 @@ export class PhotoPanel extends Component {
                   borderColor: "gray",
                   borderRadius: 4,
                   justifyContent: "center",
-                }}>
+                }}
+                onPress={this.handlePhotoPress}>
                 <Icon name="add" size={24} style={{ alignSelf: "center" }} />
               </TouchableOpacity>
             ))}