Prevented error when paused Activity isn’t the current Activity

[grahammendick]

Summary

I’m the author of the Navigation router. It’s a navigation library that is 100% native on Android and iOS. On Android it creates an Activity per screen. It uses the native makeSceneTransitionAnimation API to bring shared element animation to Android when navigating between screens/Activities.

The Problem

Create two screens A and B. Add a shared element to each screen that animates when navigating from A to B. When the screen orientation isn’t changed then everything works fine. The problem happens when screen B has a different orientation to A. Start the app in portrait and navigate to B. Change the app to landscape and navigate back to A. React Native throws an error saying “Pausing an activity that is not the current activity, this is incorrect!”.

The Reason

React Native wrongly assumes that only current Activity can be paused. To see why this assumption is wrong, download Android’s shared element sample. Add debug logs to the onPause and onResume of the Main and Detail Activities.

Navigating back from Detail to Main, without changing the orientation, generates the logs:

1. Detail Paused
2. Main Resume

Navigating back from Detail to Main, after changing the orientation, generates the logs:

1. Main Resume
2. Main Paused
3. Detail Paused
4. Main Resume

Notice that the Detail Activity is paused while the Main Activity is current!

Changelog

[Android] [Fixed] - Allow change of screen orientation when using the native shared element API

Test Plan

I created a new react native app based on my zoon sample that demonstrates shared element animation using the Navigation router. I followed the “Building from source” instructions to point the app at my fork with the fix in. I started the App in portrait and navigated from the grid to the details. Then I changed to landscape and navigated back to grid. I checked that no error was thrown.

[makovkastar]

Hm, looking at the Activity lifecycle diagram from this article (Back Stack — Scenario 2: Activities in the back stack with configuration changes), it shouldn't be the case that onPause of the Main activity is called after we rotate the screen and press back on the Details activity:

I created a sample project and these are the logs I get when I start the Details activity, rotate the screen and press the back button:

com.example.playground E/DetailsActivity: onPause
com.example.playground E/MainActivity: onDestroy
com.example.playground E/MainActivity: onCreate
com.example.playground E/MainActivity: onStart
com.example.playground E/MainActivity: onRestoreInstanceState
com.example.playground E/MainActivity: onResume
com.example.playground E/DetailsActivity: onStop
com.example.playground E/DetailsActivity: onDestroy

As you can see, onPause is not called on the MainActivity, which confirms what the above mentioned diagram shows. Are you sure you have different behaviour?

[grahammendick]

I'm sure. It only happens if there’s a shared element transition running between the two Activities. Please try it out in Android’s shared element sample application.

Start in portrait, click an image, rotate to landscape and click the Android back button. Then the Detail Activity will pause while the Main Activity is current.

[grahammendick]

I've changed my Navigation router to use multiple Fragments instead of multiple Activities. So, although this is still a React Native bug, it means I don't face the problem anymore