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 设备上以预期方向渲染时，即表示完成。