Tukukkk

I'm using Camera that comes from expo package and I'm having trouble with camera view distortion. My phone has 2:1 ratio, which is non-standard.

When I use getSupportedRatiosAsync method of the camera, I get all kinds of ratios like 1:1, 2:1, 4:3, 16:9, however only 2:1 looks good.

How can I select a ratio that fits device's natural resolution? Is there a way, to access device's preferred ratio? Or is there any hack around it, like always selecting 16:9 and having the camera component add black margins, where the actual device's ratio is not fitting the 16:9?

EDIT:

My phone resolution is 2196x1080, therefore correct ratio should be 2:1. But I'm unable to come up with a function that would compute 2196x1080=>2:1, since (2 * 1080) !== 2196

Is there any way how to infer best possible ratio even for such stupid resolutions?

On Samsung S9, the screen aspect ratio of 18.5:9 is very close to 2:1. And if you don't hide the navigation bar, the area devoted to your camera preview is probably even closer to the suported 2:1.

But if you want this to work on all devices with their different screen aspect ratios and different supported camera aspect ratios, you must crop the preview to your window, see e.g. https://github.com/waitopiggu/rn-camera-android-cropping-test.

As for choosing the best camera aspect ratio, you are right that exact match may not be acvailable; let's find the one that is closest to what we want:

const wantedRatio = height/width

var bestRatio = 0;

var bestRatioError = 100000;

for (i in ratios) {

    const r = ratios[i].split(":")

    if (abs(wantedRatio - r[0]/r[1]) < bestRatioError) {

        bestRatioError = abs(wantedRatio - r[0]/r[1])

        bestRatio = ratios[i]

    }

}



this.setState({

    bestRatio

})

Firstly get device dimension(resolution、ration) using https://facebook.github.io/react-native/docs/dimensions.

Then you could try this:

import React from 'react';

import {

    Platform

} from 'react-native';

import {

    RNCamera

} from 'react-native-camera';



const DESIRED_RATIO = "2:1"; //suppose the result of first step is 2:1



class MyCameraComponent extends Component {

    state = {}



    prepareRatio = async () => {

        if (Platform.OS === 'android' && this.cam) {

            const ratios = await this.cam.getSupportedRatiosAsync();



            // See if the current device has your desired ratio, otherwise get the maximum supported one

            // Usually the last element of "ratios" is the maximum supported ratio

            const ratio = ratios.find((ratio) => ratio === DESIRED_RATIO) || ratios[ratios.length - 1];



            this.setState({

                ratio

            });

        }

    }



    render() {

        return ( <

            RNCamera ref = {

                (cam) => this.cam = cam

            }

            onCameraReady = {

                this.prepareRatio

            } // You can only get the supported ratios when the camera is mounted

            ratio = {

                this.state.ratio

            }

            />

        );

    }

}