docs(rn-camera): add rncamera-example without face detection (react-n…

…ative-camera#1979) [skip ci]

.eslintrc

@@ -4,14 +4,9 @@
     "browser": true,
     "node": true,
     "jest": true,
-    "es6": true,
+    "es6": true
   },
-  "plugins": [
-    "react",
-    "react-native",
-    "flowtype",
-    "import"
-  ],
+  "plugins": ["react", "react-native", "flowtype", "import"],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
@@ -54,12 +49,7 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions":[
-          ".js",
-          ".android.js",
-          ".ios.js",
-          ".json"
-        ]
+        "extensions": [".js", ".android.js", ".ios.js", ".json"]
       }
     }
   },

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100
+}

examples/basic/.gitignore

@@ -0,0 +1,43 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+*.iml
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+ios/Frameworks/FaceDetector/Frameworks/**/*

examples/basic/App.js

@@ -0,0 +1,283 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { StyleSheet, Text, View, TouchableOpacity, Slider } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { RNCamera } from 'react-native-camera';
+
+const flashModeOrder = {
+  off: 'on',
+  on: 'auto',
+  auto: 'torch',
+  torch: 'off',
+};
+
+const wbOrder = {
+  auto: 'sunny',
+  sunny: 'cloudy',
+  cloudy: 'shadow',
+  shadow: 'fluorescent',
+  fluorescent: 'incandescent',
+  incandescent: 'auto',
+};
+
+export default class CameraScreen extends React.Component {
+  state = {
+    flash: 'off',
+    zoom: 0,
+    autoFocus: 'on',
+    depth: 0,
+    type: 'back',
+    whiteBalance: 'auto',
+    ratio: '16:9',
+    ratios: [],
+    photoId: 1,
+    showGallery: false,
+    photos: [],
+    recordOptions: {
+      mute: false,
+      maxDuration: 5,
+      quality: RNCamera.Constants.VideoQuality['288p'],
+    },
+    isRecording: false,
+  };
+
+  getRatios = async function() {
+    const ratios = await this.camera.getSupportedRatios();
+    return ratios;
+  };
+
+  toggleView() {
+    this.setState({
+      showGallery: !this.state.showGallery,
+    });
+  }
+
+  toggleFacing() {
+    this.setState({
+      type: this.state.type === 'back' ? 'front' : 'back',
+    });
+  }
+
+  toggleFlash() {
+    this.setState({
+      flash: flashModeOrder[this.state.flash],
+    });
+  }
+
+  setRatio(ratio) {
+    this.setState({
+      ratio,
+    });
+  }
+
+  toggleWB() {
+    this.setState({
+      whiteBalance: wbOrder[this.state.whiteBalance],
+    });
+  }
+
+  toggleFocus() {
+    this.setState({
+      autoFocus: this.state.autoFocus === 'on' ? 'off' : 'on',
+    });
+  }
+
+  zoomOut() {
+    this.setState({
+      zoom: this.state.zoom - 0.1 < 0 ? 0 : this.state.zoom - 0.1,
+    });
+  }
+
+  zoomIn() {
+    this.setState({
+      zoom: this.state.zoom + 0.1 > 1 ? 1 : this.state.zoom + 0.1,
+    });
+  }
+
+  setFocusDepth(depth) {
+    this.setState({
+      depth,
+    });
+  }
+
+  takePicture = async function() {
+    if (this.camera) {
+      this.camera.takePictureAsync().then(data => {
+        console.log('data: ', data);
+      });
+    }
+  };
+
+  takeVideo = async function() {
+    if (this.camera) {
+      try {
+        const promise = this.camera.recordAsync(this.state.recordOptions);
+
+        if (promise) {
+          this.setState({ isRecording: true });
+          const data = await promise;
+          this.setState({ isRecording: false });
+          console.warn(data);
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  };
+
+  renderCamera() {
+    return (
+      <RNCamera
+        ref={ref => {
+          this.camera = ref;
+        }}
+        style={{
+          flex: 1,
+        }}
+        type={this.state.type}
+        flashMode={this.state.flash}
+        autoFocus={this.state.autoFocus}
+        zoom={this.state.zoom}
+        whiteBalance={this.state.whiteBalance}
+        ratio={this.state.ratio}
+        focusDepth={this.state.depth}
+        permissionDialogTitle={'Permission to use camera'}
+        permissionDialogMessage={'We need your permission to use your camera phone'}
+      >
+        <View
+          style={{
+            flex: 0.5,
+            backgroundColor: 'transparent',
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+          }}
+        >
+          <TouchableOpacity style={styles.flipButton} onPress={this.toggleFacing.bind(this)}>
+            <Text style={styles.flipText}> FLIP </Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.flipButton} onPress={this.toggleFlash.bind(this)}>
+            <Text style={styles.flipText}> FLASH: {this.state.flash} </Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.flipButton} onPress={this.toggleWB.bind(this)}>
+            <Text style={styles.flipText}> WB: {this.state.whiteBalance} </Text>
+          </TouchableOpacity>
+        </View>
+        <View
+          style={{
+            flex: 0.4,
+            backgroundColor: 'transparent',
+            flexDirection: 'row',
+            alignSelf: 'flex-end',
+          }}
+        >
+          <Slider
+            style={{ width: 150, marginTop: 15, alignSelf: 'flex-end' }}
+            onValueChange={this.setFocusDepth.bind(this)}
+            step={0.1}
+            disabled={this.state.autoFocus === 'on'}
+          />
+        </View>
+        <View
+          style={{
+            flex: 0.1,
+            backgroundColor: 'transparent',
+            flexDirection: 'row',
+            alignSelf: 'flex-end',
+          }}
+        >
+          <TouchableOpacity
+            style={[
+              styles.flipButton,
+              {
+                flex: 0.3,
+                alignSelf: 'flex-end',
+                backgroundColor: this.state.isRecording ? 'white' : 'darkred',
+              },
+            ]}
+            onPress={this.state.isRecording ? () => {} : this.takeVideo.bind(this)}
+          >
+            {this.state.isRecording ? (
+              <Text style={styles.flipText}> ☕ </Text>
+            ) : (
+              <Text style={styles.flipText}> REC </Text>
+            )}
+          </TouchableOpacity>
+        </View>
+        <View
+          style={{
+            flex: 0.1,
+            backgroundColor: 'transparent',
+            flexDirection: 'row',
+            alignSelf: 'flex-end',
+          }}
+        >
+          <TouchableOpacity
+            style={[styles.flipButton, { flex: 0.1, alignSelf: 'flex-end' }]}
+            onPress={this.zoomIn.bind(this)}
+          >
+            <Text style={styles.flipText}> + </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.flipButton, { flex: 0.1, alignSelf: 'flex-end' }]}
+            onPress={this.zoomOut.bind(this)}
+          >
+            <Text style={styles.flipText}> - </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.flipButton, { flex: 0.25, alignSelf: 'flex-end' }]}
+            onPress={this.toggleFocus.bind(this)}
+          >
+            <Text style={styles.flipText}> AF : {this.state.autoFocus} </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.flipButton, styles.picButton, { flex: 0.3, alignSelf: 'flex-end' }]}
+            onPress={this.takePicture.bind(this)}
+          >
+            <Text style={styles.flipText}> SNAP </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.flipButton, styles.galleryButton, { flex: 0.25, alignSelf: 'flex-end' }]}
+            onPress={this.toggleView.bind(this)}
+          >
+            <Text style={styles.flipText}> Gallery </Text>
+          </TouchableOpacity>
+        </View>
+      </RNCamera>
+    );
+  }
+
+  render() {
+    return <View style={styles.container}>{this.renderCamera()}</View>;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 10,
+    backgroundColor: '#000',
+  },
+  flipButton: {
+    flex: 0.3,
+    height: 40,
+    marginHorizontal: 2,
+    marginBottom: 10,
+    marginTop: 20,
+    borderRadius: 8,
+    borderColor: 'white',
+    borderWidth: 1,
+    padding: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  flipText: {
+    color: 'white',
+    fontSize: 15,
+  },
+  picButton: {
+    backgroundColor: 'darkseagreen',
+  },
+  galleryButton: {
+    backgroundColor: 'indianred',
+  },
+});

examples/basic/README.md

@@ -0,0 +1,28 @@
+# React Native Camera Basic Example
+
+An example project demonstrating the use of react-native-camera.
+
+### Features
+
+Shows all different attributes of the camera like front and back cameras, flash modes, WB, etc.
+
+Demonstrates the usage of the face detection feature by drawing polygons around the detected face.
+
+### Setup
+
+run `yarn install`
+
+### Contributing
+
+* Pull Requests are welcome, if you open a pull request we will do our best to get to it in a timely manner
+* Pull Request Reviews and even more welcome! we need help testing, reviewing, and updating open PRs
+* If you are interested in contributing more actively, please contact me (same username on Twitter, Facebook, etc.) Thanks!
+* If you want to help us coding, join Expo slack https://slack.expo.io/, so we can chat over there. (#react-native-camera)
+
+### FAQ
+
+## Why is `react-native-camera` not listed as a dependency in `package.json`?
+
+`react-native` uses `metro` for dependency resolution. In order to not recursively install this example into the `node_modules` of this example we use `rn-cli.config.js` to resolve `react-native-camera`. This also allows a quicker iteration when developing (without having to `yarn install` after every single change in `react-native-camera`).
+
+Also the Header Search Paths in `ios/RNCameraExample.xcodeproj/project.pbxproj` are changed to fit the `react-native-camera` root directory.