joplin/ReactNativeClient/lib/components/CameraView.js

const React = require('react'); const Component = React.Component;
const { View, Button, StyleSheet, TouchableOpacity } = require('react-native');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
import { RNCamera } from 'react-native-camera';
const Icon = require('react-native-vector-icons/Ionicons').default;
const { _ } = require('lib/locale.js');

class CameraView extends Component {

	constructor() {
		super();

		this.state = {
			snapping: false,
		};
		
		this.back_onPress = this.back_onPress.bind(this);
		this.photo_onPress = this.photo_onPress.bind(this);
	}

	back_onPress() {
		if (this.props.onCancel) this.props.onCancel();
	}

	async photo_onPress() {
		if (!this.camera || !this.props.onPhoto) return;

		this.setState({ snapping: true });

		const result = await this.camera.takePictureAsync({
			quality: 0.8,
			exif: true,
			fixOrientation: true 
		});

		if (this.props.onPhoto) this.props.onPhoto(result);

		this.setState({ snapping: false });
	}

	render() {
		const theme = themeStyle(this.props.theme);
		const photoIcon = this.state.snapping ? 'md-checkmark' : 'md-camera';

		return (
			<View style={this.props.style}>
				<RNCamera
					style={{flex:1}}
					ref={ref => { this.camera = ref; }}
					type={RNCamera.Constants.Type.back}
					permissionDialogTitle={_('Permission to use camera')}
					permissionDialogMessage={_('Your permission to use your camera is required.')}
				>
					<View style={{flex:1, justifyContent:'space-between', flexDirection:'column'}}>
						<View style={{flex:1, justifyContent:'flex-start'}}>
							<TouchableOpacity onPress={this.back_onPress}>
								<View style={{ marginLeft:5, marginTop:5, borderRadius:90, width:50,height:50, display:'flex', backgroundColor:'#ffffff55', justifyContent:'center', alignItems:'center'}}>
									<Icon name={'md-arrow-back'} style={{
										fontSize: 40,
										color: 'black',
									}} />
								</View>
							</TouchableOpacity>
						</View>
						<View style={{flex:1, justifyContent:'center', alignItems:'flex-end', flexDirection:'row'}}>
							<TouchableOpacity onPress={this.photo_onPress}>
								<View style={{marginBottom:20, borderRadius:90, width:90,height:90,backgroundColor:'#ffffffaa', display:'flex', justifyContent:'center', alignItems:'center'}}>
									<Icon name={photoIcon} style={{
										fontSize: 60,
										color: 'black',
									}} />
								</View>
							</TouchableOpacity>
						</View>
					</View>
				</RNCamera>
			</View>
		);
	}

}

module.exports = CameraView;