0

Using react-native-camera (RNCamera), I am struggling to set the height of my camera preview to be correct when the preview is the full width of the window, with the full preview being visible. This question assumes the device is in portrait mode at all times.

My code is as follows: 

import React, { Component } from "react";
import { Dimensions, Button, View } from "react-native";
import { RNCamera } from "react-native-camera";

export default class CameraScreen extends Component {
  static navigationOptions = {
    header: null
  };
  render() {
    return (
      <View>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            width: Dimensions.get("window").width,
            height: 400 // <-- need to know what this value actually is
          }}
          type={RNCamera.Constants.Type.back}
        />
        <Button
          title="This button should appear directly below the camera preview"
          onPress={() => false}
        />
      </View>
    );
  }
});

I'm sure it has something to do with getSupportedRatiosAsync(), however this returns multiple ratios. Can anybody help?

isherwood
  • 58,414
  • 16
  • 114
  • 157
markmoxx
  • 1,492
  • 1
  • 11
  • 21

1 Answers1

5

First you have to choose which ratio do you want to use.

4:3, 1:1, 16:9 etc.

Your height can be calculate with your ratio and width.

ratio = height:width (for react-native-camera)

So, lets try calculate height for 4:3 ratio and 480px width.

var height = 4*width/3; //for portrait mode 3:4

If you want to full performance for portrait then you should use 'flex:1'.

You can get more details in react-native-camera documentation #ratio

Onurgule
  • 707
  • 8
  • 21