Merge pull request #25 from amazam/cameraroll

Implement camera roll
amazam · Mar 20, 2018 · 4a7d18f · 4a7d18f
2 parents 0b82e70 + 4074dc9
commit 4a7d18f
Show file tree

Hide file tree

Showing 20 changed files with 612 additions and 236 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,11 @@ To setup repository, follow steps below:
 - git clone the repository
 - In terminal of the cloned folder, type:
   - yarn install
-  - yarn start
-- In Android Studio, build project.
+- In Android Studio, open folder of cloned project and build project.
 - In Genymotion app, create/select virtual device to use.
-- In Android Studio, press run/play button.
-- On Virtual device, the program should run.
+- In terminal, type:
+  - yarn reactn
+  - adb logcat
+- In VS code, download the React-Native Tools and enable the debugger
+  - Press play on the debugger to start the server
+- In Genymotion, the app should deploy.
diff --git a/amazon-product-api-in.js b/amazon-product-api-in.js
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -148,6 +148,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-fetch-blob')
     compile project(':react-native-camera')
     compile (project(':react-native-camera')) {
         exclude group: "com.google.android.gms"

diff --git a/android/app/src/main/java/com/amazam/MainApplication.java b/android/app/src/main/java/com/amazam/MainApplication.java
@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.RNFetchBlob.RNFetchBlobPackage;
 import org.reactnative.camera.RNCameraPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -24,6 +25,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RNFetchBlobPackage(),
             new RNCameraPackage()
       );
     }

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'amazam'
+include ':react-native-fetch-blob'
+project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
 include ':react-native-camera'
 project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
 

diff --git a/ios/amazam.xcodeproj/project.pbxproj b/ios/amazam.xcodeproj/project.pbxproj
@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -38,6 +37,7 @@
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
 		F01F094F3DD441B7AC42B8C1 /* libRNCamera.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00D52CEADAAA437884EC185F /* libRNCamera.a */; };
+		51CD8504F99843CFA248380E /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DDF93E9C43B4D768EBEF0CE /* libRNFetchBlob.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -352,6 +352,8 @@
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
 		B86767FF03844308A39DAD0E /* RNCamera.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNCamera.xcodeproj; path = "../node_modules/react-native-camera/ios/RNCamera.xcodeproj"; sourceTree = "<group>"; };
+		4027984C504B4F11A1F428ED /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; name = "RNFetchBlob.xcodeproj"; path = "../node_modules/react-native-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		7DDF93E9C43B4D768EBEF0CE /* libRNFetchBlob.a */ = {isa = PBXFileReference; name = "libRNFetchBlob.a"; path = "libRNFetchBlob.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -381,6 +383,7 @@
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				F01F094F3DD441B7AC42B8C1 /* libRNCamera.a in Frameworks */,
+				51CD8504F99843CFA248380E /* libRNFetchBlob.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -583,6 +586,7 @@
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				B86767FF03844308A39DAD0E /* RNCamera.xcodeproj */,
+				4027984C504B4F11A1F428ED /* RNFetchBlob.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1220,13 +1224,15 @@
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../../../React/**",
 					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = amazamTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1248,13 +1254,15 @@
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 					"$(SRCROOT)/../../../React/**",
 					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = amazamTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1275,6 +1283,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = amazam/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1298,6 +1307,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = amazam/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1327,12 +1337,14 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = "amazam-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1361,12 +1373,14 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
 				);
 				INFOPLIST_FILE = "amazam-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1396,6 +1410,7 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.amazam-tvOSTests";
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1421,6 +1436,7 @@
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.amazam-tvOSTests";
 				PRODUCT_NAME = "$(TARGET_NAME)";

diff --git a/package.json b/package.json
@@ -7,15 +7,18 @@
     "test": "jest",
     "reactn": "react-native run-android",
     "reactcam": "react-native link react-native-camera",
-    "reactuncam": "react-native unlink react-native-camera"
+    "reactuncam": "react-native unlink react-native-camera",
+    "postinstall": "react-native link"
   },
   "dependencies": {
     "amazon-product-api": "^0.4.4",
     "axios": "^0.18.0",
+    "prop-types": "^15.6.1",
     "react": "^16.3.0-alpha.1",
     "react-native": "0.54.2",
     "react-native-camera": "^1.0.2",
     "react-native-dotenv": "^0.1.1",
+    "react-native-fetch-blob": "^0.10.8",
     "react-navigation": "^1.5.2",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",

diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { StackNavigator } from 'react-navigation';
 import CameraScreen from './Camera';
 import ResultScreen from './Result';
+import ViewPhotos from './ViewPhotos';
+import SelectedPhoto from './SelectedPhoto';
 
 const RootStack = StackNavigator(
   {
@@ -11,6 +13,12 @@ const RootStack = StackNavigator(
     Result: {
       screen: ResultScreen,
     },
+    CameraRoll: {
+      screen: ViewPhotos,
+    },
+    SelectedPhoto: {
+      screen: SelectedPhoto,
+    },
   },
   {
     initialRouteName: 'Home',

diff --git a/src/Camera.js b/src/Camera.js
@@ -1,17 +1,63 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
+  CameraRoll,
   Text,
   View,
   TouchableOpacity,
+  TouchableHighlight,
   StyleSheet,
 } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 
-class CameraScreen extends React.Component {
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: 'black',
+  },
+  bottomButtons: {
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  defaultButton: {
+    flex: 0,
+    flexDirection: 'row',
+  },
+  preview: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  capture: {
+    flex: 0,
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    padding: 15,
+    paddingHorizontal: 20,
+    alignSelf: 'center',
+    margin: 20,
+  },
+});
+
+export default class CameraScreen extends React.Component {
   static navigationOptions = {
-    title: 'Take a picture of your product',
+    title: 'Take a photo or select a picture',
+    headerStyle: { backgroundColor: 'black' },
+    headerTintColor: 'white',
+    headerTitleStyle: { color: 'white' },
   };
 
+  getPhotosFromGallery = () => {
+    CameraRoll.getPhotos({ first: 100 })
+      .then((res) => {
+        // return image paths from res.edges
+        const photoArray = res.edges;
+        this.props.navigation.navigate('CameraRoll', { photos: photoArray });
+      });
+  }
+
   takePicture = async () => {
     if (this.camera) {
       const options = { quality: 0.6, base64: true };
@@ -23,7 +69,6 @@ class CameraScreen extends React.Component {
   };
 
   render() {
-    const { navigate } = this.props.navigation;
     return (
       <View style={styles.container}>
         <RNCamera
@@ -34,39 +79,49 @@ class CameraScreen extends React.Component {
           permissionDialogTitle="Permission to use camera"
           permissionDialogMessage="We need your permission to use your camera phone"
         />
-        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
-          <TouchableOpacity
-            onPress={this.takePicture}
-            style={styles.capture}
-          >
-            <Text style={{ fontSize: 14 }}> SNAP </Text>
-          </TouchableOpacity>
+        <View style={styles.bottomButtons}>
+          <View style={styles.defaultButton}>
+            <TouchableOpacity
+              onPress={this.takePicture}
+              style={styles.capture}
+            >
+              <Text style={{ fontSize: 14 }}>
+                SNAP
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.defaultButton}>
+            <TouchableHighlight
+              onPress={() => this.getPhotosFromGallery()}
+              style={styles.capture}
+            >
+              <Text style={{ fontSize: 14 }}>
+                CameraRoll
+              </Text>
+            </TouchableHighlight>
+          </View>
         </View>
       </View>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: 'black',
-  },
-  preview: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  capture: {
-    flex: 0,
-    backgroundColor: '#fff',
-    borderRadius: 5,
-    padding: 15,
-    paddingHorizontal: 20,
-    alignSelf: 'center',
-    margin: 20,
-  },
-});
-
-export default CameraScreen;
+CameraScreen.propTypes = {
+  navigation: PropTypes.shape({
+    addListener: PropTypes.func,
+    dispatch: PropTypes.func,
+    getParam: PropTypes.func,
+    goBack: PropTypes.func,
+    isFocused: PropTypes.func,
+    navigate: PropTypes.func,
+    pop: PropTypes.func,
+    popToTop: PropTypes.func,
+    push: PropTypes.func,
+    replace: PropTypes.func,
+    setParams: PropTypes.func,
+    state: PropTypes.shape({
+      key: PropTypes.string,
+      routeName: PropTypes.string,
+    }),
+  }).isRequired,
+};