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;
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 infoinfo 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
*/
`