react / react/react-native

On iOS, orientation changes don't animate in a way that "looks native"

Open
#16,060 29 comments 33 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Help Wanted :octocat: Issue: Author Provided Repro Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.4.0
Yarn: 1.0.1
npm: 5.4.1
Watchman: 4.5.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: 2.3 AI-162.3934792

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.48.3 => 0.48.3

Steps to Reproduce
  1. Create a react native app w/ react native init
  2. Run it on an iOS device or the iOS simulator
  3. (If on a simulator) Turn on slow animations (CMD+T) so the issue will be more obvious.
  4. Rotate the device a few times to landscape and portrait
  5. Observe that immediately after the orientation changes, the view is resized to the dimensions of the new orientation, and THEN the rotation animation begins. The view's contents and dimensions are not smoothly resized while the view is being rotated.
Expected Behavior

In a regular native iOS app, when the orientation of the device changes, the view's contents and dimensions smoothly resize while the view is also rotated at the same time.

Here is a animated gif. This is a simple native app written in swift, see how the view resizes and rotates smoothly (at the same time) on orientation changes:

native_rotation

Actual Behavior

On orientation changes, the view's dimensions and contents are resized once at the very beginning of the change, and then the rotation animation happens.

Here is another animated git. This is a simple RN app, with a red border applied to the view so you can see how the view's dimensions are immediately changed (not smoothly animated).

rn_rotation

Reproducible Demo

Sadly I can't seem to get the expo app to handle rotations so I guess having a Snack wouldn't be useful.

But you can see if yourself pretty easily if you:

  1. Use react-native init to create a new app
  2. Edit index.ios.js and add to the container's styles (line ~40):
    borderColor: 'red',
    borderWidth: 10,
  1. Then run it, turn on slow animations in the simulator (CMD+T), and change the orientation a few times.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior in a React Native app using index.ios.js, adding the border styles described around line 40 and enabling slow simulator animations. Then trace the iOS orientation-change handling involved. Done means the view's contents and dimensions resize smoothly during the rotation, matching native iOS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.