Image Orientation on Android

[phillmill]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
Memory: 23.63 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.6.0 - /usr/local/bin/node
npm: 6.1.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 2.3 AI-162.3871768
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

There is an issue with how images are being rotated, specifically portrait images on Android. Portrait images are somewhat ambiguously rotated when they render. I found similar issues in the past explaining this problem that were fixed, but I am still experiencing it in 0.56.

The Exif "orientation" value is seemingly not always respected. In screenshot below, both of these photos have orientation of "6", which from my research means rotate 90 degrees. As you can see, only one of the two were rotated (both photos of the cup were taken vertically).

This is another screenshot using the sample app linked below in the reproducible demo section. I took 6 photos vertically in a row, then displayed them from CameraRoll. The first one in the grid is not rotated correctly.

Reproducible Demo

I could not create a snack with the most recent version of react native (0.56) as it appears that CRNA still uses 0.55 by default. However, I have a repo setup for a simple app that displays a photo grid from CameraRoll.

I have only been able to reproduce this issue on Samsung Galaxy S8 and Samsung Galaxy S8+.

To reproduce:

• Take a few vertical photos with a physical device
• clone https://github.com/phillmill/rn-android-image-orientation-test
• run npm install
• react-native run-android

A workaround:

Currently my workaround is to pass a false argument to setAutoRotateEnabled() in ./ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java and compile react native from source. From there, I then rotate the image manually by reading the Exif value & using transforms accordingly. There may be a better work around, and I'd love to hear one, but that's all I have for now!

[phillmill]

Still present in 0.57

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[phillmill]

Still an issue

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[PeteTheHeat]

Looks like this is still an issue.