When Modal Component renders then AppState blur event listener calls in Android

[ims7inc]

Description

When Modal/Alert component renders in our React Native App the App State goes blur

React Native Version

0.71.6

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 12.6.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 81.42 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
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.2 AI-212.5712.43.2112.8512546
Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.6 => 0.71.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

When Modal/Alert component renders in our React Native App the App State goes blur

AppState.addEventListener('blur', callback);

here this callback method is triggering

Snack, code example, screenshot, or link to a repository

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @Format
  */

`/**

• Sample React Native App

• https://github.com/facebook/react-native

• @Format
  */

   import React, {useEffect, useState} from 'react';
   import {
     SafeAreaView,
     StatusBar,
     Text,
     useColorScheme,
     Modal,
     TouchableOpacity,
     AppState,
     View,
   } from 'react-native';
   
   import {Colors} from 'react-native/Libraries/NewAppScreen';
   
   function App(): JSX.Element {
     const isDarkMode = useColorScheme() === 'dark';
     const [isVisible, setVisible] = useState(false);
   
     useEffect(() => {
       const blurEventListener = AppState.addEventListener('blur', () => {
         console.log('blur event trigger');
       });
       const focusEventListener = AppState.addEventListener('focus', () => {
         console.log('focus event trigger');
       });
       return () => {
         focusEventListener && focusEventListener.remove();
         blurEventListener && blurEventListener.remove();
       };
     }, []);
   
     const backgroundStyle = {
       backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
       flex: 1,
     };
   
     return (
       <SafeAreaView style={backgroundStyle}>
         <StatusBar
           barStyle={isDarkMode ? 'light-content' : 'dark-content'}
           backgroundColor={backgroundStyle.backgroundColor}
         />
         <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
           <TouchableOpacity onPress={() => setVisible(!isVisible)}>
             <Text>Open Modal</Text>
           </TouchableOpacity>
         </View>
   
         <Modal visible={isVisible}>
           <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
             <TouchableOpacity onPress={() => setVisible(!isVisible)}>
               <Text>Close Modal</Text>
             </TouchableOpacity>
           </View>
         </Modal>
       </SafeAreaView>
     );
   }
   
   export default App;
  

`

[github-actions]

⚠️

Unsupported Version of React Native

ℹ️

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[ims7inc]

Same issue with latest React Native version also

[ims7inc]

⚠️ Unsupported Version of React Native
ℹ️ It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

tried in Latest React Native version also

[ims7inc]

My requirement is like, When App will goes to background i want to hide the Screen content and when the app will comes to foreground i want to show the content by setting and clearing FLAG_SECURE. but focus is changing when Modal/Alert components render in screen

@OverRide onWindowFocusChanged method is triggering when Modal component triggers

I tried with onPause() and onResume() also but onPause method is triggering with delay so screen content is not hidden when App goes background

[ChiBao284]

Same issue