Skip to content

Instantly share code, notes, and snippets.

@lebreRafael
Last active September 21, 2018 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lebreRafael/9ad44881bece3082b10d79c76fbea3d1 to your computer and use it in GitHub Desktop.
Save lebreRafael/9ad44881bece3082b10d79c76fbea3d1 to your computer and use it in GitHub Desktop.
[Expo Camera] takePictureAsync() quality not working as expected
import React, {Component} from 'react';
import {Image, SafeAreaView, Text, TouchableOpacity, View} from 'react-native';
import {Camera, Permissions} from 'expo';
class CameraComponent extends Component {
constructor () {
super();
this.state = {
hasCameraPermission: null,
imageSrc: null,
type: Camera.Constants.Type.back,
};
}
async componentWillMount () {
const {status} = await Permissions.askAsync(Permissions.CAMERA);
this.setState({hasCameraPermission: status === 'granted'});
}
handleSwitchCameraPress = () => {
this.setState({
type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
};
handleTakePicturePress = async () => {
const photo = await this.camera.takePictureAsync({base64: true, quality: 0.9});
const imageSrc = 'data:image/jpg;base64,' + photo.base64;
this.setState({imageSrc});
};
render () {
const {hasCameraPermission, imageSrc, type} = this.state;
if (hasCameraPermission === null) {
return null;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
}
if (imageSrc) {
return (
<Image
resizeMode = "stretch"
source = {{uri: imageSrc}}
style = {{flex: 1}}
/>
);
}
return (
<SafeAreaView style = {{flex: 1}}>
<Camera
ref = {(ref) => (this.camera = ref)}
style = {{
flex: 1,
justifyContent: 'flex-end',
}}
type = {type}
>
<View style = {{
flex: 0.1,
flexDirection: 'row',
justifyContent: 'space-evenly',
}}
>
<TouchableOpacity onPress = {this.handleTakePicturePress}>
<Text>{'Take picture'}</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {this.handleSwitchCameraPress}>
<Text>{'Rotate'}</Text>
</TouchableOpacity>
</View>
</Camera>
</SafeAreaView>
);
}
}
export default CameraComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment