CODEWITHSUNDEEP
react-nativeexpoexpo-camera
ntx2
ntx2

Reputation: 31

Expo-camera disorted preview

Using Expo-camera, I simply can't manage to display a small preview image (half the screen width in size) on the screen. The image always gets distorted. Here is my code I have tried several online answers to similar problems but with little success.

function Camera() {
const [cameraRatio, setCameraRatio] = useState('4:3'); 
const cameraRef = useRef(null);
const [widthRatio, heightRatio] = cameraRatio.split(':').map(Number);
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const cameraWidth = windowWidth * 0.5;  
const cameraHeight = (cameraWidth * heightRatio) / widthRatio;

useEffect(() => {
    const getCameraRatios = async () => {
        if (cameraRef.current) {
            const ratios = await cameraRef.current.getSupportedRatiosAsync();
            if (ratios && ratios.length) {
                setCameraRatio(ratios[0]);  
            }
        }
    };

    getCameraRatios();
}, []);

if (!permission) {
    return (
        <View style={{backgroundColor: 'yellow'}}/>
    )
}

if (permission && !permission.granted) {
    return (
        <View style={styles.container}>
            <Text style={{textAlign: 'center'}}>We need your permission to show the camera</Text>
            <Button onPress={requestPermission} title="grant permission"/>
        </View>
    );
}
return (
    <View style={[{marginTop: 20, paddingLeft: 20, marginBottom: 20, paddingRight: 20}]}>
        <View style={styles.camera}>
        <Camera
            ref={cameraRef}
            style={{ width: cameraWidth, height: cameraHeight }}
            ratio={cameraRatio}
         type={type}/>
        </View>
    </View>
);


  export default Camera;
   const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20
    },
    camera: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',  
        justifyContent: 'center',
    }
   });

What's wrong?

Upvotes: 0

Views: 674

Answers (1)

Engin ERGEN
Engin ERGEN

Reputation: 74

My camera component was distorted like this and I used this solution to fix it. It is good right now and there is no problem but there is a difference between this code and my code.

Your width is width / 2 so maybe you can use full width.

const cameraWidth = windowWidth;

Upvotes: 0

Related Questions