feat(rn_camera): add function as children

react-native-camera · Apr 25, 2018 · 45cc8f2 · 45cc8f2
1 parent b1721b8
commit 45cc8f2
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 2 deletions.
diff --git a/docs/RNCamera.md b/docs/RNCamera.md
@@ -78,6 +78,101 @@ const styles = StyleSheet.create({
 AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);
 ```
 
+## FaCC (Function as Child Components)
+
+**You can also use it with Facc.*
+
+```javascript
+ 'use strict';
+import React, { Component } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { RNCamera } from 'react-native-camera';
+
+const PendingView = () => (
+  <View
+    style={{
+      flex: 1,
+      backgroundColor: 'lightgreen',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Text>Waiting</Text>
+  </View>
+);
+
+class App extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <RNCamera
+          ref={ref => {
+            this.camera = ref;
+          }}
+          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'}
+        >
+          {({ camera, status }) => {
+            if (status !== 'READY') return <PendingView />;
+            return (
+              <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
+                <TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
+                  <Text style={{ fontSize: 14 }}> SNAP </Text>
+                </TouchableOpacity>
+              </View>
+            );
+          }}
+        </RNCamera>
+      </View>
+    );
+  }
+
+  takePicture = async function(camera) {
+    const options = { quality: 0.5, base64: true };
+    const data = await camera.takePictureAsync(options);
+    //  eslint-disable-next-line
+    console.log(data.uri);
+  }
+}
+
+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,
+  },
+});
+
+AppRegistry.registerComponent('BadInstagramCloneApp', () => App);
+```
+
+#### `camera` 
+
+*It's the RNCamera's reference*
+
+#### `status`
+
+'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED'
+
+
+
 ## Properties
 
 #### `autoFocus`

diff --git a/src/RNCamera.js b/src/RNCamera.js
@@ -100,6 +100,8 @@ type StateType = {
   isAuthorizationChecked: boolean,
 };
 
+type Status = 'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED';
+
 const CameraManager: Object = NativeModules.RNCameraManager ||
   NativeModules.RNCameraModule || {
     stubbed: true,
@@ -314,10 +316,25 @@ export default class Camera extends React.Component<PropsType, StateType> {
     this.setState({ isAuthorized, isAuthorizationChecked: true });
   }
 
+  getStatus = (): Status => {
+    const { isAuthorized, isAuthorizationChecked } = this.state;
+    return isAuthorized ? 'READY' : isAuthorizationChecked ? 'PENDING_AUTHORIZATION' : 'NOT_AUTHORIZED';
+  }
+
+  // CAF = Children as Function;
+  hasCAF = (): * => typeof this.props.children === 'function';
+
+  renderChildren = (): * => {
+    if (this.hasCAF()) {
+      return this.props.children({ camera: this, status: this.getStatus() })
+    }
+    return null;
+  }
+
   render() {
     const nativeProps = this._convertNativeProps(this.props);
 
-    if (this.state.isAuthorized) {
+    if (this.state.isAuthorized || this.hasCAF()) {
       return (
         <RNCamera
           {...nativeProps}
@@ -330,7 +347,9 @@ export default class Camera extends React.Component<PropsType, StateType> {
           onBarCodeRead={this._onObjectDetected(this.props.onBarCodeRead)}
           onFacesDetected={this._onObjectDetected(this.props.onFacesDetected)}
           onTextRecognized={this._onObjectDetected(this.props.onTextRecognized)}
-        />
+        >
+        {this.renderChildren()}
+        </RNCamera>
       );
     } else if (!this.state.isAuthorizationChecked) {
       return this.props.pendingAuthorizationView;