RNCamera on Android fits rather than fills to view

[almost]

RTCCamera used to have an option between fit and fill for the layout that would control (this aspect prop, which now means something different on RNCamera). RNCamera on Android just does fit, which means if the view isn't the same aspect as the camera then you get black bars. RNCamera on iOS seems to do the opposite which is a pain.

Ideally this would be set via a prop but if that isn't done it should at least be made consistent (my preference would be to always fill)

[almost]

As a workaround I'm currently doing it in my own Javascript:

  _onLayout = ({ nativeEvent: { layout: { x, y, width, height } } }) => {
    this.setState({ width, height });
  };

  render() {
    const { width, height } = this.state;

    let style;
    // https://github.com/react-native-community/react-native-camera/issues/1539
    if (Platform.OS === "android") {
      let viewfinderHeight = 0,
        viewfinderWidth = 0,
        viewFinderPaddingX = 0,
        viewFinderPaddingY = 0;

      if (width && height) {
        const ratio = 4 / 3;
        if (ratio * height < width) {
          viewfinderHeight = width / ratio;
          viewfinderWidth = width;
        } else {
          viewfinderWidth = ratio * height;
          viewfinderHeight = height;
        }
        viewFinderPaddingX = (width - viewfinderWidth) / 2;
        viewFinderPaddingY = (height - viewfinderHeight) / 2;
      }
      style = {
        position: "absolute",
        width: viewfinderWidth,
        height: viewfinderHeight,
        left: viewFinderPaddingX,
        top: viewFinderPaddingY
      };
    } else {
      style = { flex: 1 };
    }

    const cameraStyle = width && height ? {} : null;
    return (
      <View
        style={[{ overflow: "hidden" }, this.props.style]}
        onLayout={this._onLayout}
      >
        <RNCamera
          style={style}
          type={this.props.frontCamera ? "front" : "back"}
          flashMode={this.props.flashMode}
          onCameraReady={this._cameraReady}
          ref={this._gotRef}
        />
      </View>
    );
  }

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and i will leave this open.

[IssueHuntBot]

@EskelCz has funded $20.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[bneigher]

@almost your solution worked for me. Times like this make me love the internet

[MateusAndrade]

Since the issue has been solved apllying @almost solution, im closing this issue. If anyone stills having problems with this, please give a look at: #1539 (comment)

[alessandroraffa]

Hello. Just wandering what's the purpose of

const cameraStyle

Thanks in advance

[alessandroraffa]

...And also the example value of

this.props.style

Thanks again