Skip to content

Instantly share code, notes, and snippets.

@dudeinthemirror

dudeinthemirror/CameraContainer.js

Last active June 17, 2016 21:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dudeinthemirror/e1751f0b52241690533e236f75b22a9e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dudeinthemirror/e1751f0b52241690533e236f75b22a9e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dudeinthemirror revised this gist Jun 17, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion CameraContainer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -100,7 +100,7 @@ var CameraContainer = React.createClass({
    color={'#CCCCCC'}
    />
    <Text allowFontScaling={false} style={styles.deniedHeadline}>NO CAMERA ACCESS</Text>
    <Text allowFontScaling={false} style={styles.deniedText}>Please enable via your phones Settings</Text>
    <Text allowFontScaling={false} style={styles.deniedText}>Please enable via your phone Settings</Text>
    </View>
    )
    }
  2. dudeinthemirror revised this gist Jun 17, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion CameraContainer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -100,7 +100,7 @@ var CameraContainer = React.createClass({
    color={'#CCCCCC'}
    />
    <Text allowFontScaling={false} style={styles.deniedHeadline}>NO CAMERA ACCESS</Text>
    <Text allowFontScaling={false} style={styles.deniedText}>Please enable via your phone's Settings</Text>
    <Text allowFontScaling={false} style={styles.deniedText}>Please enable via your phones Settings</Text>
    </View>
    )
    }
  3. dudeinthemirror created this gist Jun 17, 2016.
    168 changes: 168 additions & 0 deletions CameraContainer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,168 @@
    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's 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)