Skip to content

CameraView shows flipped/rotated camera image in landscape mode on iOS #62

@TPXP

Description

@TPXP

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

Hey there, first of all thanks for this great library ❤️

I'm facing a quite weird behaviour when using the app in landscape mode, the CameraView component shows a rotated image, making it quite counterintuitive (albeit pretty fun 🙃 ) to align a bar code in the middle of the view.

Using the following reference picture

Image

Pointing an iPad with an app in landscape right orientation (USB-C port on the right/ apple pencil upside) gives the following view

Image

In landscape left orientation, I get the following preview

Image

Workarounds

Flipping the view manually using a react-native transform enables me to flip the view by myself, however the behaviour of the transform trop is weird - it seems to apply the rotation twice, so I need to use half the actual values!

  • In right landscape, I'm rotating the view by 135 deg
Image
  • In left landscape, I'm rotating the view by 45 deg
Image

That gives a sort of workaround however it requires me to detect the orientation using another library, and I'm not sure if I need to do the same on Android...

Library version

2.0.1

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 15.6.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 70.81 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.5
    path: /var/folders/5r/nv748tcs4xz_zhby4l9v25d80000gn/T/yarn--1763486302565-0.3932582137374139/node
  Yarn:
    version: 1.22.22
    path: /var/folders/5r/nv748tcs4xz_zhby4l9v25d80000gn/T/yarn--1763486302565-0.3932582137374139/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.19.5/bin/npm
  Watchman:
    version: 2025.07.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

  1. Build your app in multiple orientations mode
  2. Get a CameraView to work
  3. Flip the phone and try to align a QR code in the middle of the picture 🥳

Reproducible example repository

https://gist.github.com/TPXP/392189e3c32e4e3ebe444cf70c2e31b9

Metadata

Metadata

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions