Camera working

App.js

@@ -9,9 +9,11 @@ import {
     ScrollView,
     TextInput,
     TouchableHighlight,
+    TouchableOpacity,
     View,
     Modal
 } from 'react-native';
+import { RNCamera } from 'react-native-camera';
 
 import RunInfo from './components/run-info';
 import RunInfoNumeric from './components/run-info-num';
@@ -31,130 +33,176 @@ const instructions = Platform.select({
 type Props = {};
 let id = 0;
 export default class App extends Component<Props> {
-    constructor(props) {
+    // constructor(props) {
-        super(props);
+    //     super(props);
 
-         setInterval(() => {
+    //      setInterval(() => {
-            this.updateCaptures();
+    //         this.updateCaptures();
-        }, 5000);
+    //     }, 5000);
 
-        let watchID = navigator.geolocation.watchPosition((position) => {
+    //     let watchID = navigator.geolocation.watchPosition((position) => {
-            this.setState({
+    //         this.setState({
-                walkMarkers: [
+    //             walkMarkers: [
-                    ...this.state.walkMarkers, {
+    //                 ...this.state.walkMarkers, {
-                        coordinate: position.coords,
+    //                     coordinate: position.coords,
-                        key: id++
+    //                     key: id++
+    //                 }
+    //             ]
+    //         });
+    //     }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
+
+    //     this.state = {
+    //         activeWalk: false,
+    //         username: "",
+    //         gameNumber: "",
+    //         walkMarkers: [],
+    //         captures: [
+    //             // new CapturedArea("fanded", [
+    //             //     {latitude: -43.5623, longitude:172.5655},
+    //             //     {latitude: -43.5623, longitude:172.5650},
+    //             //     {latitude: -43.5628, longitude:172.5650},
+    //             //     {latitude: -43.5628, longitude:172.5655}
+    //             // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
+
+    //             new CapturedArea("samded", [
+    //                 {latitude: -43.5663, longitude:172.5615},
+    //                 {latitude: -43.5663, longitude:172.5610},
+    //                 {latitude: -43.5668, longitude:172.5610},
+    //                 {latitude: -43.5668, longitude:172.5615}
+    //             ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
+    //         ],
+    //         watchID 
+    //     };
+    // }
+    // updateCaptures(){
+    //     updateAreas(this.state.gameNumber, (polygons) => {
+    //         this.setState({
+    //             captures: polygons
+    //         })
+    //     })
+    // }
+    // setGameNumber(user, number){
+    //     this.setState({username: user, gameNumber: number})
+    // }
+    
+    // startWalk(){
+    //     this.setState({walkMarkers: [], activeWalk: true})
+    // }
+
+    // stopWalk(){
+    //     this.setState({activeWalk: false})
+    // }
+
+    // componentWillUnmount() {
+    //     navigator.geolocation.stopWatch(this.state.watchID);
+    // }
+    takePicture = async function() {
+        if (this.camera) {
+          const options = { quality: 0.5, base64: true };
+          const data = await this.camera.takePictureAsync(options)
+          console.log(data.uri);
         }
-                ]
-            });
-        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
-
-        this.state = {
-            activeWalk: false,
-            username: "",
-            gameNumber: "",
-            walkMarkers: [],
-            captures: [
-                // new CapturedArea("fanded", [
-                //     {latitude: -43.5623, longitude:172.5655},
-                //     {latitude: -43.5623, longitude:172.5650},
-                //     {latitude: -43.5628, longitude:172.5650},
-                //     {latitude: -43.5628, longitude:172.5655}
-                // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
-
-                new CapturedArea("samded", [
-                    {latitude: -43.5663, longitude:172.5615},
-                    {latitude: -43.5663, longitude:172.5610},
-                    {latitude: -43.5668, longitude:172.5610},
-                    {latitude: -43.5668, longitude:172.5615}
-                ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
-            ],
-            watchID 
     };
-    }
-    updateCaptures(){
-        updateAreas(this.state.gameNumber, (polygons) => {
-            this.setState({
-                captures: polygons
-            })
-        })
-    }
-    setGameNumber(user, number){
-        this.setState({username: user, gameNumber: number})
-    }
     
-    startWalk(){
-        this.setState({walkMarkers: [], activeWalk: true})
-    }
-
-    stopWalk(){
-        this.setState({activeWalk: false})
-    }
-
-    componentWillUnmount() {
-        navigator.geolocation.stopWatch(this.state.watchID);
-    }
 
     render() {
         
         return (
-            <View style ={{flex: 1}}>
+            <View style={styles.container}>
-                <MapView
+        <RNCamera
-                    showsUserLocation
+            ref={ref => {
-                    style = {styles.map}
+              this.camera = ref;
-                    initialRegion={{
-                        latitude: -43.5610623,
-                        longitude: 172.5655853,
-                        latitudeDelta: 0.02,
-                        longitudeDelta: 0.02,
             }}
-                    // onRegionChange = {(region)=> this.addMarker((region))}
+            style = {styles.preview}
+            type={RNCamera.Constants.Type.back}
+            flashMode={RNCamera.Constants.FlashMode.on}
+            permissionDialogTitle={'Permission to use camera'}
+            permissionDialogMessage={'We need your permission to use your camera phone'}
+            onGoogleVisionBarcodesDetected={({ barcodes }) => {
+              console.log(barcodes)
+            }}
+        />
+        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
+        <TouchableOpacity
+            onPress={this.takePicture.bind(this)}
+            style = {styles.capture}
         >
-
+            <Text style={{fontSize: 14}}> SNAP </Text>
-                    <MapView.Polyline
+        </TouchableOpacity>
-                        coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
-                        strokeWidth={5}
-                    />
-                    {this.state.captures.map((capture, i) => {
-                        return <MapView.Polygon
-                            key={i}
-                            coordinates={capture.coordinates}
-                            strokeWidth={2}
-                            strokeColor={capture.strokeColor}
-                            fillColor={capture.fillColor}
-                        />
-                        }
-                    )
-                    }
-                </MapView>
-                <Text style={styles.gameNumber}>
-                    {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
-                
-                </Text>
-
-                <RoomInput 
-                    ref={instance => this.roomInputModal = instance}
-                    join={(user, number) => this.setGameNumber(user, number)}/>
-                <View style={styles.menu}>
-                
-                    <View style={styles.walk}>
-                        <WalkButton 
-                            start={() => {this.startWalk()}}
-                            stop={() => {this.stopWalk()}}
-                            />
-                    </View>
-
-                    <View style={styles.infoWrapper}>
-                        <JoinButton 
-                            modal={() => this.roomInputModal.setModalVisible(true)}/>
-                    </View>
         </View>
       </View>
+      
+        //     <View style ={{flex: 1}}>
+        //         <MapView
+        //             showsUserLocation
+        //             style = {styles.map}
+        //             initialRegion={{
+        //                 latitude: -43.5610623,
+        //                 longitude: 172.5655853,
+        //                 latitudeDelta: 0.02,
+        //                 longitudeDelta: 0.02,
+        //             }}
+        //             // onRegionChange = {(region)=> this.addMarker((region))}
+        //         >
+
+        //             <MapView.Polyline
+        //                 coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
+        //                 strokeWidth={5}
+        //             />
+        //             {this.state.captures.map((capture, i) => {
+        //                 return <MapView.Polygon
+        //                     key={i}
+        //                     coordinates={capture.coordinates}
+        //                     strokeWidth={2}
+        //                     strokeColor={capture.strokeColor}
+        //                     fillColor={capture.fillColor}
+        //                 />
+        //                 }
+        //             )
+        //             }
+        //         </MapView>
+        //         <Text style={styles.gameNumber}>
+        //             {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
+                
+        //         </Text>
+
+        //         <RoomInput 
+        //             ref={instance => this.roomInputModal = instance}
+        //             join={(user, number) => this.setGameNumber(user, number)}/>
+        //         <View style={styles.menu}>
+                
+        //             <View style={styles.walk}>
+        //                 <WalkButton 
+        //                     start={() => {this.startWalk()}}
+        //                     stop={() => {this.stopWalk()}}
+        //                     />
+        //             </View>
+
+        //             <View style={styles.infoWrapper}>
+        //                 <JoinButton 
+        //                     modal={() => this.roomInputModal.setModalVisible(true)}/>
+        //             </View>
+        //         </View>
+        //    </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+    preview: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    },
+    capture: {
+      flex: 0,
+      backgroundColor: '#fff',
+      borderRadius: 5,
+      padding: 15,
+      paddingHorizontal: 20,
+      alignSelf: 'center',
+      margin: 20
+    },
     infoWrapper: {
         paddingVertical: 0,
         flexDirection: 'row',

android/app/build.gradle

@@ -139,8 +139,20 @@ android {
 dependencies {
     compile project(':react-native-maps')
     compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:24.0.0"
+    // compile "com.android.support:appcompat-v7:24.0.0"
+    // multidex true
+    implementation 'com.android.support:multidex:1.0.1'; compile ("com.android.support:support-v4:26.0.1") { force = true} //<-- force dependency resolution to 26.0.1 in my case }
+    // compile ("com.android.support:support-v4:26.0.1") {
+    //     force = true //<-- force dependency resolution to 26.0.1 in my case
+    // }
     compile "com.facebook.react:react-native:+"  // From node_modules
+    compile (project(':react-native-camera')) {
+        exclude group: "com.google.android.gms"
+        compile 'com.android.support:exifinterface:27.+'
+        compile ('com.google.android.gms:play-services-vision:12.0.1') {
+            force = true
+        }
+    }
 }
 
 // Run this once to be able to run the application with BUCK
@@ -149,3 +161,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
+
+// configurations.all {
+//     resolutionStrategy {
+//         force 'com.android.support:support-v4:27.1.0'
+//     }
+// }

android/app/src/main/AndroidManifest.xml

@@ -4,6 +4,9 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <application
       android:name=".MainApplication"

android/app/src/main/assets/index.android.bundle.meta

@@ -1 +1 @@
-�
zsuɹe��O�u�~�^

++��
�r�f������{�

android/app/src/main/java/com/myapp/MainApplication.java

@@ -9,6 +9,8 @@ import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 
+import org.reactnative.camera.RNCameraPackage;
+
 import java.util.Arrays;
 import java.util.List;
 
@@ -24,7 +26,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
-            new MapsPackage()
+            new MapsPackage(),
+            new RNCameraPackage()
       );
     }
 

android/build.gradle

@@ -21,5 +21,18 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        maven { url "https://jitpack.io" }
+        maven { url "https://maven.google.com" }
     }
 }
+
+/**
+* Project-wide gradle configuration properties for use by all modules
+*/
+ext {
+    compileSdkVersion           = 26
+    targetSdkVersion            = 26
+    buildToolsVersion           = "26.0.2"
+    googlePlayServicesVersion   = "12.0.1"
+    supportLibVersion           = "27.1.0"
+}

android/settings.gradle

@@ -3,3 +3,6 @@ include ':react-native-maps'
 project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
 
 include ':app'
+
+include ':react-native-camera'
+project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-camera/android')

package.json

@@ -10,7 +10,8 @@
     "npm": "^6.4.0",
     "react": "16.3.1",
     "react-native": "0.55.4",
-    "react-native-maps": "^0.21.0"
+    "react-native-maps": "^0.21.0",
+    "react-native-camera": "^1.2.0-7"
   },
   "devDependencies": {
     "babel-jest": "23.4.2",