Mobile: Improved camera attachment

ReactNativeClient/android/app/build.gradle

@@ -137,6 +137,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-camera')
 	compile project(':react-native-file-viewer')
 	compile project(':react-native-securerandom')
 	compile project(':react-native-push-notification')

ReactNativeClient/android/app/src/main/java/net/cozic/joplin/MainApplication.java

@@ -3,6 +3,7 @@ package net.cozic.joplin;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import org.reactnative.camera.RNCameraPackage;
 import com.vinzscam.reactnativefileviewer.RNFileViewerPackage;
 import net.rhogan.rnsecurerandom.RNSecureRandomPackage;
 import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
@@ -37,6 +38,7 @@ public class MainApplication extends Application implements ReactApplication {
 			return Arrays.<ReactPackage>asList(
 				new ImageResizerPackage(),
 				new MainReactPackage(),
+            new RNCameraPackage(),
             new RNFileViewerPackage(),
             new RNSecureRandomPackage(),
             new ReactNativePushNotificationPackage(),

ReactNativeClient/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Joplin'
+include ':react-native-camera'
+project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
 include ':react-native-file-viewer'
 project(':react-native-file-viewer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-file-viewer/android')
 include ':react-native-securerandom'

ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj

@@ -13,6 +13,7 @@
 		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
 		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
 		0DAD2E67F6A14BDC8250B927 /* libRNDocumentPicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 82214D3345D846709A314868 /* libRNDocumentPicker.a */; };
+		12AE298E1C0E445682922DAB /* libRNCamera.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E132B594F4FB4C96A2E2B0FF /* libRNCamera.a */; };
 		133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };
 		139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; };
 		139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
@@ -342,6 +343,13 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RNFileViewer;
 		};
+		4D8C5643217161BF00E93280 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = FC908F114F494130A324B402 /* RNCamera.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 4107012F1ACB723B00C6AA39;
+			remoteInfo = RNCamera;
+		};
 		4DA7F80C1FC1DA9C00353191 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = A4716DB8654B431D894F89E1 /* RNImagePicker.xcodeproj */;
@@ -441,9 +449,11 @@
 		CCDC2774CD86466F897D88E2 /* libRNFileViewer.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFileViewer.a; sourceTree = "<group>"; };
 		CCDE9E9AF09B45F391B1C2AF /* SQLite.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = SQLite.xcodeproj; path = "../node_modules/react-native-sqlite-storage/src/ios/SQLite.xcodeproj"; sourceTree = "<group>"; };
 		DF1C50EBC11E46A3AF87F80A /* RCTImageResizer.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTImageResizer.xcodeproj; path = "../node_modules/react-native-image-resizer/ios/RCTImageResizer.xcodeproj"; sourceTree = "<group>"; };
+		E132B594F4FB4C96A2E2B0FF /* libRNCamera.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNCamera.a; sourceTree = "<group>"; };
 		E2638D52624B477FABB52B8F /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		F098E1ACCB594C828C851A57 /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = "<group>"; };
 		F5E37D05726A4A08B2EE323A /* libRNFetchBlob.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFetchBlob.a; sourceTree = "<group>"; };
+		FC908F114F494130A324B402 /* 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>"; };
 		FD370E24D76E461D960DD85D /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		FF411B45E68B4A8CBCC35777 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -477,6 +487,7 @@
 				AF99EEC6C55042F7BFC87583 /* libRNImagePicker.a in Frameworks */,
 				F3D0BB525E6C490294D73075 /* libRNSecureRandom.a in Frameworks */,
 				82C61D3DAE0A4666883001E9 /* libRNFileViewer.a in Frameworks */,
+				12AE298E1C0E445682922DAB /* libRNCamera.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -611,6 +622,7 @@
 				44A39642217548C8ADA91CBA /* libRNImagePicker.a */,
 				22647ACF9A4C45918C44C599 /* libRNSecureRandom.a */,
 				CCDC2774CD86466F897D88E2 /* libRNFileViewer.a */,
+				E132B594F4FB4C96A2E2B0FF /* libRNCamera.a */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -672,6 +684,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		4D8C5640217161BF00E93280 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				4D8C5644217161BF00E93280 /* libRNCamera.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		4DA7F8091FC1DA9C00353191 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -750,6 +770,7 @@
 				A4716DB8654B431D894F89E1 /* RNImagePicker.xcodeproj */,
 				252BD7B86BF7435B960DA901 /* RNSecureRandom.xcodeproj */,
 				59F5448FAF7345F8B568BD00 /* RNFileViewer.xcodeproj */,
+				FC908F114F494130A324B402 /* RNCamera.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -907,6 +928,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = 4D8C5640217161BF00E93280 /* Products */;
+					ProjectRef = FC908F114F494130A324B402 /* RNCamera.xcodeproj */;
+				},
 				{
 					ProductGroup = 4D2A85AD1FBCE3AC0028537D /* Products */;
 					ProjectRef = 02C42EA98156482DB00BF86D /* RNDocumentPicker.xcodeproj */;
@@ -1242,6 +1267,13 @@
 			remoteRef = 4D8B719B2163E8C500136BBC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		4D8C5644217161BF00E93280 /* libRNCamera.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNCamera.a;
+			remoteRef = 4D8C5643217161BF00E93280 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		4DA7F80D1FC1DA9C00353191 /* libRNImagePicker.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1379,6 +1411,7 @@
 					"$(SRCROOT)..\node_modules\neact-native-image-pickerios",
 					"$(SRCROOT)..\node_modules\neact-native-securerandomios",
 					"$(SRCROOT)..\node_modules\neact-native-file-viewerios",
+					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 				);
 				INFOPLIST_FILE = Joplin/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1386,6 +1419,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/Joplin\"",
 					"\"$(SRCROOT)/Joplin\"",
+					"\"$(SRCROOT)/Joplin\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1421,6 +1455,7 @@
 					"$(SRCROOT)..\node_modules\neact-native-image-pickerios",
 					"$(SRCROOT)..\node_modules\neact-native-securerandomios",
 					"$(SRCROOT)..\node_modules\neact-native-file-viewerios",
+					"$(SRCROOT)/../node_modules/react-native-camera/ios/**",
 				);
 				INFOPLIST_FILE = Joplin/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1428,6 +1463,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/Joplin\"",
 					"\"$(SRCROOT)/Joplin\"",
+					"\"$(SRCROOT)/Joplin\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",

ReactNativeClient/lib/components/CameraView.js

@@ -0,0 +1,83 @@
+const React = require('react'); const Component = React.Component;
+const { View, Button, StyleSheet, TouchableOpacity } = require('react-native');
+const { globalStyle, themeStyle } = require('lib/components/global-style.js');
+import { RNCamera } from 'react-native-camera';
+const Icon = require('react-native-vector-icons/Ionicons').default;
+const { _ } = require('lib/locale.js');
+
+class CameraView extends Component {
+
+	constructor() {
+		super();
+
+		this.state = {
+			snapping: false,
+		};
+		
+		this.back_onPress = this.back_onPress.bind(this);
+		this.photo_onPress = this.photo_onPress.bind(this);
+	}
+
+	back_onPress() {
+		if (this.props.onCancel) this.props.onCancel();
+	}
+
+	async photo_onPress() {
+		if (!this.camera || !this.props.onPhoto) return;
+
+		this.setState({ snapping: true });
+
+		const result = await this.camera.takePictureAsync({
+			quality: 0.8,
+			exif: true,
+			fixOrientation: true 
+		});
+
+		if (this.props.onPhoto) this.props.onPhoto(result);
+
+		this.setState({ snapping: false });
+	}
+
+	render() {
+		const theme = themeStyle(this.props.theme);
+		const photoIcon = this.state.snapping ? 'md-checkmark' : 'md-camera';
+
+		return (
+			<View style={this.props.style}>
+				<RNCamera
+					style={{flex:1}}
+					ref={ref => { this.camera = ref; }}
+					type={RNCamera.Constants.Type.back}
+					permissionDialogTitle={_('Permission to use camera')}
+					permissionDialogMessage={_('Your permission to use your camera is required.')}
+				>
+					<View style={{flex:1, justifyContent:'space-between', flexDirection:'column'}}>
+						<View style={{flex:1, justifyContent:'flex-start'}}>
+							<TouchableOpacity onPress={this.back_onPress}>
+								<View style={{ marginLeft:5, marginTop:5, borderRadius:90, width:50,height:50, display:'flex', backgroundColor:'#ffffff55', justifyContent:'center', alignItems:'center'}}>
+									<Icon name={'md-arrow-back'} style={{
+										fontSize: 40,
+										color: 'black',
+									}} />
+								</View>
+							</TouchableOpacity>
+						</View>
+						<View style={{flex:1, justifyContent:'center', alignItems:'flex-end', flexDirection:'row'}}>
+							<TouchableOpacity onPress={this.photo_onPress}>
+								<View style={{marginBottom:20, borderRadius:90, width:90,height:90,backgroundColor:'#ffffffaa', display:'flex', justifyContent:'center', alignItems:'center'}}>
+									<Icon name={photoIcon} style={{
+										fontSize: 60,
+										color: 'black',
+									}} />
+								</View>
+							</TouchableOpacity>
+						</View>
+					</View>
+				</RNCamera>
+			</View>
+		);
+	}
+
+}
+
+module.exports = CameraView;

ReactNativeClient/lib/components/screens/note.js

@@ -36,6 +36,7 @@ const ImagePicker = require('react-native-image-picker');
 const AlarmService = require('lib/services/AlarmService.js');
 const { SelectDateTimeDialog } = require('lib/components/select-date-time-dialog.js');
 const ShareExtension = require('react-native-share-extension').default;
+const CameraView = require('lib/components/CameraView');
 
 import FileViewer from 'react-native-file-viewer';
 
@@ -60,6 +61,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			heightBumpView:0,
 			noteTagDialogShown: false,
 			fromShare: false,
+			showCamera: false,
 		};
 
 		// iOS doesn't support multiline text fields properly so disable it
@@ -158,6 +160,10 @@ class NoteScreenComponent extends BaseScreenComponent {
 				this.refs.noteBodyViewer.rebuildMd();
 			}
 		}
+
+		this.attachPhoto_onPress = this.attachPhoto_onPress.bind(this);
+		this.cameraView_onPhoto = this.cameraView_onPhoto.bind(this);
+		this.cameraView_onCancel = this.cameraView_onCancel.bind(this);
 	}
 
 	styles() {
@@ -335,7 +341,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	async attachFile(pickerResponse, fileType) {
+	async attachFile(pickerResponse, fileType) {		
 		if (!pickerResponse) {
 			reg.logger().warn('Got no response from picker');
 			return;
@@ -354,7 +360,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 		const localFilePath = pickerResponse.uri;
 		let mimeType = pickerResponse.type;
 
-
 		if (!mimeType) {
 			const ext = fileExtension(localFilePath);
 			mimeType = mimeUtils.fromFileExtension(ext);
@@ -376,7 +381,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		resource.id = uuid.create();
 		resource.mime = mimeType;
 		resource.title = pickerResponse.fileName ? pickerResponse.fileName : _('Untitled');
-		resource.file_extension = safeFileExtension(fileExtension(pickerResponse.fileName));
+		resource.file_extension = safeFileExtension(fileExtension(pickerResponse.fileName ? pickerResponse.fileName : localFilePath));
 
 		if (!resource.mime) resource.mime = 'application/octet-stream';
 
@@ -422,6 +427,25 @@ class NoteScreenComponent extends BaseScreenComponent {
 		await this.attachFile(response, 'image');
 	}
 
+	attachPhoto_onPress() {
+		this.setState({ showCamera: true });
+	}	
+
+	cameraView_onPhoto(data) {
+		this.attachFile({
+			uri: data.uri,
+			didCancel: false,
+			error: null,
+			type: 'image/jpg',
+		}, 'image');
+
+		this.setState({ showCamera: false });
+	}
+
+	cameraView_onCancel() {
+		this.setState({ showCamera: false });
+	}
+
 	async attachFile_onPress() {
 		const response = await this.pickDocument();
 		await this.attachFile(response, 'all');
@@ -506,7 +530,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		let canAttachPicture = true;
 		if (Platform.OS === 'android' && Platform.Version < 21) canAttachPicture = false;
 		if (canAttachPicture) {
-			output.push({ title: _('Attach photo'), onPress: () => { this.attachImage_onPress(); } });
+			output.push({ title: _('Attach photo'), onPress: () => { this.attachPhoto_onPress(); } });
 			output.push({ title: _('Attach any file'), onPress: () => { this.attachFile_onPress(); } });
 			output.push({ isDivider: true });
 		}
@@ -555,6 +579,13 @@ class NoteScreenComponent extends BaseScreenComponent {
 		const folder = this.state.folder;
 		const isNew = !note.id;
 
+		if (this.state.showCamera) {
+			return <CameraView theme={this.props.theme} style={{flex:1}} onPhoto={this.cameraView_onPhoto} onCancel={this.cameraView_onCancel}/>
+		}
+
+
+
+
 		let bodyComponent = null;
 		if (this.state.mode == 'view') {
 			const onCheckboxChange = (newBody) => {

ReactNativeClient/main.js

@@ -14,6 +14,8 @@
 // require("ReactFeatureFlags").warnAboutDeprecatedLifecycles = false;
 
 
+// console.disableYellowBox = true
+
 const { AppRegistry } = require('react-native');
 const { Root } = require('./root.js');
 

ReactNativeClient/package-lock.json

@@ -929,7 +929,7 @@
     },
     "ansi-colors": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
       "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
       "requires": {
         "ansi-wrap": "^0.1.0"
@@ -2723,14 +2723,14 @@
       "dependencies": {
         "kind-of": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
           "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
         }
       }
     },
     "external-editor": {
       "version": "2.2.0",
-      "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
       "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
       "requires": {
         "chardet": "^0.4.0",
@@ -3684,7 +3684,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "requires": {
         "depd": "~1.1.2",
@@ -4788,7 +4788,7 @@
     },
     "jsonfile": {
       "version": "2.4.0",
-      "resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
       "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
       "requires": {
         "graceful-fs": "^4.1.6"
@@ -5173,7 +5173,7 @@
         },
         "load-json-file": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
           "requires": {
             "graceful-fs": "^4.1.2",
@@ -5824,7 +5824,7 @@
     },
     "opn": {
       "version": "3.0.3",
-      "resolved": "http://registry.npmjs.org/opn/-/opn-3.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-3.0.3.tgz",
       "integrity": "sha1-ttmec5n3jWXDuq/+8fsojpuFJDo=",
       "requires": {
         "object-assign": "^4.0.1"
@@ -5994,7 +5994,7 @@
     },
     "pegjs": {
       "version": "0.10.0",
-      "resolved": "http://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
       "integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0="
     },
     "performance-now": {
@@ -6108,7 +6108,7 @@
     },
     "pretty-format": {
       "version": "4.3.1",
-      "resolved": "http://registry.npmjs.org/pretty-format/-/pretty-format-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-4.3.1.tgz",
       "integrity": "sha1-UwvlxCs8BbNkFKeipDN6qArNDo0="
     },
     "private": {
@@ -6397,7 +6397,7 @@
         },
         "load-json-file": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
           "requires": {
             "graceful-fs": "^4.1.2",
@@ -6539,6 +6539,31 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-camera": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-1.3.0.tgz",
+      "integrity": "sha512-f4Nev0dvJmWQPbXLYu4BF17agLWS6iQ+vanPlWkEaa4MAjbClD/YrQaR8w9vY+C472crSp3kRGHJXIQzSwgMpw==",
+      "requires": {
+        "lodash": "^4.17.10",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+        },
+        "prop-types": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+          "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+          "requires": {
+            "loose-envify": "^1.3.1",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "react-native-datepicker": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.6.0.tgz",
@@ -7009,7 +7034,7 @@
     },
     "readable-stream": {
       "version": "2.3.6",
-      "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
       "requires": {
         "core-util-is": "~1.0.0",
@@ -8148,7 +8173,7 @@
       "dependencies": {
         "rimraf": {
           "version": "2.2.8",
-          "resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
           "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI="
         }
       }
@@ -8174,7 +8199,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
@@ -8733,7 +8758,7 @@
       "dependencies": {
         "uuid": {
           "version": "3.0.1",
-          "resolved": "http://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
           "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE="
         }
       }
@@ -8785,7 +8810,7 @@
       "dependencies": {
         "sax": {
           "version": "1.1.6",
-          "resolved": "http://registry.npmjs.org/sax/-/sax-1.1.6.tgz",
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.6.tgz",
           "integrity": "sha1-XWFr6KXmB9VOEUr65Vt+ry/MMkA="
         }
       }

ReactNativeClient/package.json

@@ -26,6 +26,7 @@
     "react": "^16.5.0",
     "react-native": "^0.57.1",
     "react-native-action-button": "^2.6.9",
+    "react-native-camera": "^1.3.0",
     "react-native-datepicker": "^1.6.0",
     "react-native-dialogbox": "^0.6.6",
     "react-native-document-picker": "^2.1.0",