React Native Project to Detect Whether App is Running in Background or Foreground in Android or IOS

import React, {Component} from 'react';
import {AppState, StyleSheet, Text, View} from 'react-native';

class App extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground!');
    }
    this.setState({appState: nextAppState});
    console.log(nextAppState);
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Current state is: {this.state.appState}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

import React, {Component} from 'react';

import {AppState, StyleSheet, Text, View} from 'react-native';

class App extends Component {

state = {

appState: AppState.currentState,

};

componentDidMount() {

AppState.addEventListener('change', this._handleAppStateChange);

}

componentWillUnmount() {

AppState.removeEventListener('change', this._handleAppStateChange);

}

_handleAppStateChange = (nextAppState) => {

if (

this.state.appState.match(/inactive|background/) &&

nextAppState === 'active'

) {

console.log('App has come to the foreground!');

}

this.setState({appState: nextAppState});

console.log(nextAppState);

};

render() {

return (

<Text>Current state is: {this.state.appState}</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

});

export default App;

import React, {useRef, useState, useEffect} from 'react';
import {AppState, StyleSheet, Text, View} from 'react-native';

const App = () => {
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener('change', _handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground!');
    }

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log('AppState', appState.current);
  };

  return (
    <View style={styles.container}>
      <Text>Current state is: {appStateVisible}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

import React, {useRef, useState, useEffect} from 'react';

import {AppState, StyleSheet, Text, View} from 'react-native';

const App = () => {

const appState = useRef(AppState.currentState);

const [appStateVisible, setAppStateVisible] = useState(appState.current);

useEffect(() => {

AppState.addEventListener('change', _handleAppStateChange);

return () => {

AppState.removeEventListener('change', _handleAppStateChange);

};

}, []);

const _handleAppStateChange = (nextAppState) => {

if (

appState.current.match(/inactive|background/) &&

nextAppState === 'active'

) {

console.log('App has come to the foreground!');

}

appState.current = nextAppState;

setAppStateVisible(appState.current);

console.log('AppState', appState.current);

};

return (

<Text>Current state is: {appStateVisible}</Text>

</View>

);

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

});

export default App;

Related posts:

You Might Also Like

React.js Hooks Tic Tac Toe Computer AI Single or Multiplayer Board Game Using Functional Components in Javascript Full Project For Beginners

React.js Input Mask Form Fields Example to Validate Dates,Credit Cards & Phone Number in Browser Full Project For Beginners

React.js Tutorial to Download File as Attachment From URL Using FileSaver.js Library in Browser

Leave a Reply Cancel reply