react-native-camera-kit

react-native-camera-kit

Currently work-in-progress

Advanced native camera control with pre-defined aspect ratio, crop, etc

Install

1. In your project folder run npm install react-native-camera-kit --save
2. Install Cocoa Pods by running sudo gem install cocoapods
3. Go to 'your-project-folder/ios' and run pod install
4. Close your XCode and open the your-project.xcworkspace that was created

Usage

All you need is to require the react-native-camera-kit module, import NativeModules from react-native and then use the ReactNativeCameraKit native module.

Example

import React from 'react-native';

const {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    PixelRatio,
    NativeModules: {
        ReactNativeCameraKit
        }
    } = React;

class Example extends Component {
  state = {
    photoSource: null,
    error: null
  };

  selectPhotoTapped() {
    const options = {
      takePhotoActionTitle: 'Take a photo',
      pickPhotoActionTitle: 'Gallery',
      cancelActionTitle: 'Cancel',
      sendSelectedPhotosTitle: 'Send %lu photo(s)',
      aspectRatioInfoMessage: 'Your images look best with 16:9 ratio',
      aspectRatios: ["16:9", "1:1", "4:3"],
      collectionName: 'your-folder'
    };

      ReactNativeCameraKit.presentPhotoPicker(options, (response) => {
      if (response.images) {
        const source = {uri: 'data:image/jpeg;base64,' + response.images[response.images.length -1], isStatic: true};
        this.setState({
          photoSource: source
        });
      }
      if (response.error) {
        this.setState({
          error: response.error
        });
      }
    });
  }
  
  render() {
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
                <View style={[styles.photo, styles.photoContainer, {marginBottom: 20}]}>
                { this.state.photoSource === null 
                  ? <Text>Select a Photo</Text> 
                  : <Image style={styles.photo} source={this.state.photoSource} />
                }
                </View>
                { this.state.error ? <Text>this.state.error</Text> : null }
            </TouchableOpacity>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  photoContainer: {
    borderColor: '#9B9B9B',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1 / PixelRatio.get()
  },
  photo: {
    width: 100,
    height: 100
  }
});

AppRegistry.registerComponent('ReactNativeCameraKit', () => Example);