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!

Tái hiện sự cố với ứng dụng rn-android-image-orientation-test được liên kết bằng cách chạy npm install và react-native run-android trên một thiết bị Android có ảnh dọc. Bắt đầu với ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java và so sánh các ảnh CameraRoll được hiển thị với các giá trị hướng EXIF của chúng. Hoàn tất khi ảnh dọc được hiển thị theo hướng mong đợi trên các thiết bị Samsung bị ảnh hưởng.