drnaf/src/elements/DRNAFCamera.js

Dynamic React-Native Application Framework

import React from 'react';
import {
    StyleSheet, View,
    Image,
    Text, TouchableOpacity
} from 'react-native'
import { DRNAFComponent } from '../inherites/DRNAFComponent';
import { RNCamera } from 'react-native-camera'
import { l } from '../utilities/Logs';

const PhotoPreview = (dataUri) => (
    <View style={{
        zIndex: 1,
        borderWidth: 2,
        borderRadius: 8,
        overflow: 'hidden',
        position: 'absolute',
        marginLeft: 8,
        marginTop: 8,

    }}>
        <Image
            style={{
                backgroundColor: "transparent",
                width: 100,
                height: 100,
            }}
            source={{
                uri: dataUri
            }} />
    </View>
)

class DRNAFCamera extends DRNAFComponent {
    constructor(props) {
        super(props);

        this.state = {
            width: 0,
            height: 0,
            image_result: null,
            reference_key: props.reference_key
        }

        this.onLayoutChanged = this.onLayoutChanged.bind(this);
        this.PendingView = this.PendingView.bind(this);
    }

    PendingView() {
        return <View
            style={{
                flex: 1,
                backgroundColor: 'lightgreen',
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <TouchableOpacity onPress={() => {
                this.setState({});

            }}>
                <Text>Waiting</Text>
            </TouchableOpacity>
        </View >
    }

    onLayoutChanged(event) {
        const { width, height } = event.nativeEvent.layout;

        this.setState({
            width: width,
            height: height,
        })
    }

    takePicture = async () => {
        // prepare usage variables
        const mtn = this.ct +"takePicture() ";

        if (this.camera) {
            const options = { quality: 0.5, base64: true };
            const data = await this.camera.takePictureAsync(options);
            console.log(data.uri);

            this.setState({
                image_result: data.uri,

            }, () => {
                // prepare usage variables
                const { reference_key } = this.state;

                if(!super.nonNullNonUndefined( reference_key )){
                    // log
                    l.e(mtn +"reference key["+ reference_key +"] is not ready.")
                    // exit from this process
                    return; 
                }

                // collection callback
                super.collectionCallback({
                    fieldName: reference_key + "",
                    data: {
                        uri: data.uri,

                    }
                })
            })
        }
    };

    render() {
        return <View style={[styles.container, {
            width: '100%',
            height: this.state.width,

        }]}
            onLayout={this.onLayoutChanged}>

            {/* Preview */}
            {(!this.state.image_result)
                ? null
                : PhotoPreview(this.state.image_result)
            }
            {/* Camera */}
            <RNCamera
                ref={ref => {
                    this.camera = ref;
                }}
                ratio={"1:1"}
                style={styles.preview}
                type={RNCamera.Constants.Type.back}
                // flashMode={RNCamera.Constants.FlashMode.on}
                androidCameraPermissionOptions={null}
                androidRecordAudioPermissionOptions={null}
                // androidCameraPermissionOptions={{
                //     title: 'Permission to use camera',
                //     message: 'We need your permission to use your camera',
                //     buttonPositive: 'Ok',
                //     buttonNegative: 'Cancel',
                // }}
                // androidRecordAudioPermissionOptions={{
                //     title: 'Permission to use audio recording',
                //     message: 'We need your permission to use your audio',
                //     buttonPositive: 'Ok',
                //     buttonNegative: 'Cancel',
                // }}
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    console.log(barcodes);
                }}
            >
                {({ camera, status, recordAudioPermissionStatus }) => {
                    if (status !== 'READY') return this.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>
    }

}

const styles = StyleSheet.create({
    container: {
        // flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});

export { DRNAFCamera }