CameraContainer.js

import React from 'react';
import ReactNative from 'react-native';
import Camera from 'react-native-camera'

import LightboxView from 'killr/js/components/LightboxView.js'
import Styles from 'killr/js/utils/Styles.js'

let Icon = Styles.Icon

const {
  Alert,
  Platform,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = ReactNative;

import * as imageActions from 'killr/js/actions/ImageActions.js'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

function mapDispatchToProps(dispatch) {
  return bindActionCreators(imageActions, dispatch)
}

var CameraContainer = React.createClass({
  getInitialState() {
    return {cameraType: Camera.constants.Type.back}
  },

  async componentDidMount() {
    if (Platform.OS === 'ios') {
      let isAuthorized = await Camera.checkVideoAuthorizationStatus();
      if (isAuthorized) {
        this.setState({cameraAvailable: true});
      }
    } else {
      this.setState({cameraAvailable: true});
    }
  },

  async _takePicture() {
    let captured = await this.refs.camera.capture();
    this.setState({ uri: captured.path });
  },

  _flipCamera() {
    var state = this.state;
    state.cameraType = state.cameraType === Camera.constants.Type.back
      ? Camera.constants.Type.front : Camera.constants.Type.back;
    this.setState(state);
  },

  _lightboxClose() {
    this.setState({ uri: null });
  },

  render() {
    if (this.state.uri) {
      return (
        <LightboxView
          navigator={this.props.navigator}
          image={{ uri: this.state.uri }}
          imageSelected={this.props.imageSelected}
          isOpen={true}
          onClose={this._lightboxClose}>
        </LightboxView>
      )
    } else if (this.state.cameraAvailable) {
      return (
        <Camera
          style={styles.container}
          ref="camera"
          type={this.state.cameraType}
          captureAudio={false}
        >
          <TouchableHighlight
            style={styles.cameraButton}
            onPress={this._takePicture}>
            <View style={styles.cameraButtonInner} />
          </TouchableHighlight>
          <TouchableHighlight
            style={styles.flipButton}
            onPress={this._flipCamera}>
            <Icon allowFontScaling={false}
              name='cycle'
              size={24}
              color={'#FFFFFF'}
            />
          </TouchableHighlight>
        </Camera>
      )
    } else {
      return (
        <View style={styles.denied}>
          <Icon allowFontScaling={false}
            name='camera'
            size={72}
            color={'#CCCCCC'}
          />
          <Text allowFontScaling={false} style={styles.deniedHeadline}>NO CAMERA ACCESS</Text>
          <Text allowFontScaling={false} style={styles.deniedText}>Please enable via your phone Settings</Text>
        </View>
      )
    }
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cameraButton: {
    position: 'absolute',
    bottom: 25,
    left: Styles.SCREEN_WIDTH / 2 - 35,
    right: Styles.SCREEN_WIDTH / 2 - 35,
    width: 70,
    height: 70,
    borderRadius: 35,
    borderColor: '#FFFFFF',
    borderWidth: 5,
    justifyContent: 'center',
    shadowColor: '#000000',
    shadowOpacity: .5,
    shadowRadius: 10,
    shadowOffset: {
      height: 1,
    },
  },
  cameraButtonInner: {
    alignSelf: 'center',
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#FFFFFF',
  },
  flipButton: {
    position: 'absolute',
    bottom: 25,
    right: 25,
    shadowColor: '#000000',
    shadowOpacity: .5,
    shadowRadius: 10,
    shadowOffset: {
      height: 1,
    },
  },
  denied: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  deniedHeadline: {
    marginTop: 20,
    fontSize: 18,
    fontFamily: Styles.FONT,
    color: '#999999'
  },
  deniedText: {
    fontFamily: Styles.FONT,
    color: Styles.NEUTRAL_COLOR,
    fontSize: 16
  }
});

export default connect(null, mapDispatchToProps)(CameraContainer)