Image Orientation on Android

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!

縦向きの写真が入った Android デバイスで npm install と react-native run-android を実行し、リンク先の rn-android-image-orientation-test アプリで問題を再現します。ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java から始め、表示された CameraRoll の画像とそれぞれの EXIF 向きの値を比較します。影響を受ける Samsung デバイスで、縦向きの画像が期待どおりの向きで表示されれば完了です。