react-native
react-native copied to clipboard
AppState does not call 'change' event when entering PiP if using Android's `setAutoEnterEnabled` param for PiP
Description
For Android 12, the newly suggested configuration for PiP is to use setAutoEnterEnabled [docs]
instead of manually calling enterPictureInPictureMode within MainActivity.java onUserLeaveHint
However, when using setAutoEnterEnabled, although it successfully enters PiP mode, it does not trigger a change event for AppState (AppState.addEventListener('change', ...))
This results in react native not being aware that the app is in background while in PiP, and instead the AppState stays active
Version
0.70.6
Output of npx react-native info
System:
OS: macOS 12.5
CPU: (8) arm64 Apple M1
Memory: 101.61 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.8.0 - /opt/homebrew/opt/node/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.18.0 - /opt/homebrew/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
Languages:
Java: 11.0.12 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
- Init PiP for Android following these steps
- Add AppState listener for
changeevent in react native code - Put react native app into PiP mode, notice that it does not trigger the AppState
changecallback
Snack, code example, screenshot, or link to a repository
AppState listener for RN code:
const appStateListener = AppState.addEventListener('change', (nextAppState) => {
console .log('AppState change; Next app state: ', nextAppState);
});
Add this to MainActivity.java to init PiP:
@Override
protected void onStart() {
super.onStart();
new PictureInPictureParams.Builder()
.setAspectRatio(new Rational(3, 4))
.setSeamlessResizeEnabled(false)
.setAutoEnterEnabled(true)
.build();
}