Added RNCamera example app, Usage documentation

.gitignore

@@ -50,6 +50,7 @@ DerivedData/
 *.perspectivev3
 !default.perspectivev3
 xcuserdata/
+.idea
 
 ## Other
 *.moved-aside

README.md

@@ -1,6 +1,6 @@
 # React Native Camera iOS
 
-*Native iOS Camera ImagePicker w/ cameraOverlayView support*
+*Native iOS Camera ImagePicker w/ cameraOverlayView support.*
 
 ## Getting Started
 
@@ -18,13 +18,112 @@ $ react-native link
 
 ## Usage
 
-*Usage info coming soon...*
+The `RNCamera` component that is exported by this module is based on
+[`<Modal/>`][modal] from the React Native team.
+
+```js
+import React from 'react';
+import {
+    View,
+    Button,
+    StyleSheet
+} from 'react-native';
+import RNCamera from 'react-native-camera-ios';
+
+const styles = StyleSheet.create({
+    overlayRight: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: 80,
+        alignItems: 'center'
+    }
+});
+class CameraModal extends React.Component {
+    onCapture({ image }) {
+        // Fields available:
+        // `image.path`, `image.width`, `image.height`
+
+        this.props.onCapture(image.path);
+    }
+    render() {
+        return (
+            <RNCamera
+                ref={(r) => this.camera = r}
+                {...this.props}
+                onCapture={(event) => this.onCapture(event)}
+            >
+                <View
+                    style={styles.overlayRight}
+                >
+                    <Button
+                        onPress={() => this.camera.capture()}
+                        color="white"
+                        title="Capture"
+                    />
+                </View>
+            </RNCamera>
+        );
+    }
+}
+```
+
+### Functions
+
+#### capture()
+
+This function causes the camera to begin taking a photo (i.e. activating flash,
+adjusting exposure), and will later call the `onCapture()` event with the new
+image information on disk.
+
+This function should not be called again until the `onCapture()` callback has
+been triggered.
+
+### Props
+
+#### visible: Boolean
+
+Whether the modal should be visible on the screen. Defaults to `false`.
+
+#### animationType: String
+
+The animation style for opening the camera modal. Can be `none`, `slide`, or
+`fade`. Defaults to `slide`.
+
+#### onCapture(event): Function
+
+Event function when the camera button or `capture()` function has been
+triggered, and the file has been completely written to disk. This function will
+be called with the event structure below:
+
+```js
+{
+    image: {
+        path: String,
+        width: Number,
+        height: Number
+    }
+}
+```
+
+#### onCancel(): Function
+
+Event function when the Cancel button has been pressed on the default iOS camera
+screen. When children views are defined, this function cannot be called because
+the system replaces the standard view (including the Cancel button) with custom
+views.
 
 ## Notes
 
-- This module is currently in initial stages of development, and it **not recommended** for large-scale use
+- This module is currently in initial stages of development, and it **not
+recommended** for large-scale use
+- This module is currently only tested on iPad devices and the iPad Simulator
 
 ## License
 
-[MIT](https://github.com/houserater/react-native-camera-ios/blob/master/LICENSE)
+[MIT][license]
+
 
+[modal]: http://facebook.github.io/react-native/docs/modal.html
+[license]: https://github.com/houserater/react-native-camera-ios/blob/master/LICENSE

RNCamera/RNCameraImagePickerController.m

@@ -79,7 +79,8 @@ - (void)viewWillDisappear:(BOOL)animated {
 }
 
 - (void)takePicture {
-    CGRect imageFrame = CGRectMake(0, 0, 1024, 768);
+    // iPhone7/iPadPro 12MP camera (4000px x 3000px photos)
+    CGRect imageFrame = CGRectMake(0, 0, 4000, 3000);
     UIGraphicsBeginImageContextWithOptions(imageFrame.size, false, 0.0);
     [self.view.backgroundColor setFill];
     UIRectFill(imageFrame);
@@ -93,4 +94,4 @@ - (void)takePicture {
 
 #endif
 
-@end
+@end

examples/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/BasicCamera.js

@@ -0,0 +1,3 @@
+import RNCamera from 'react-native-camera-ios';
+
+export default RNCamera;

examples/CustomCamera.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+    View,
+    Button,
+    StyleSheet
+} from 'react-native';
+import RNCamera from 'react-native-camera-ios';
+
+const styles = StyleSheet.create({
+    overlayRight: {
+        position: 'absolute',
+        top: 0, bottom: 0, right: 0,
+        width: 80,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+export default class CustomCamera extends React.Component {
+    static propTypes = {
+        ...RNCamera.propTypes
+    };
+
+    render() {
+        return (
+            <RNCamera
+                ref={(r) => this.camera = r}
+                {...this.props}
+            >
+                <View
+                    style={styles.overlayRight}
+                >
+                    <Button
+                        onPress={() => this.camera.capture()}
+                        title="Take"
+                    />
+                </View>
+            </RNCamera>
+        );
+    }
+}

examples/__tests__/index.ios.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

examples/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "RNCameraExamples",
+  "displayName": "RNCameraExamples"
+}

examples/index.ios.js

@@ -0,0 +1,68 @@
+/**
+ * RNCamera Examples React Native App
+ * https://github.com/houserater/react-native-camera-ios
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Button,
+  View
+} from 'react-native';
+
+import BasicCamera from "./BasicCamera";
+import CustomCamera from "./CustomCamera";
+
+export default class RNCameraExamples extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      basicCameraVisible: false
+    };
+  }
+  _setCameraVisible(type, visible) {
+    let field = `${type}CameraVisible`;
+    this.setState({
+      [field]: visible
+    });
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          onPress={() => this._setCameraVisible('basic', true)}
+          title="Launch Basic Camera"
+        />
+
+        <Button
+            onPress={() => this._setCameraVisible('custom', true)}
+            title="Launch Custom Camera"
+        />
+
+        <BasicCamera
+            visible={this.state.basicCameraVisible}
+            onCancel={() => this._setCameraVisible('basic', false)}
+            onCapture={() => this._setCameraVisible('basic', false)}
+        />
+
+        <CustomCamera
+            visible={this.state.customCameraVisible}
+            onCapture={() => this._setCameraVisible('custom', false)}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+});
+
+AppRegistry.registerComponent('RNCameraExamples', () => RNCameraExamples);