Posts
1. Install the below two mandatory npm plugins.
npm install --save react-native-async-storage
npm install --save moment
2. app.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, AppState } from 'react-native';
//import Routing from "./src/routing/routing";
import AsyncStorage from '@react-native-async-storage/async-storage';
import moment from 'moment';
//import { Actions } from 'react-native-router-flux';
export default class App extends Component {
constructor() {
super();
this.state = {
appState: AppState.currentState
}
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = async(nextAppState) => {
this.setState({ appState: nextAppState });
if (nextAppState === 'background') {
var previousTime = new Date();
await AsyncStorage.setItem( "previousTime", previousTime.toString() );
// Do something here on app background.
console.log( "App is in Background Mode @ ", previousTime );
}
if (nextAppState === 'active') {
// Do something here on app active foreground mode.
const start = moment( await AsyncStorage.getItem('previousTime') );
const end = moment();
//in original implementation, use minutes and check with N value.
//const range = end.diff(start,'minutes');
const range = end.diff(start,'seconds');
if ( range >= 10 ){
console.log ( "App is exit the Active Range, So moving to Login screen." );
/* Actions.login({"message":"Session Exit"} ); */
}
else{
console.log( "App is in Active Range, So continue your process ...");
}
}
if (nextAppState === 'inactive') {
// Do something here on app inactive mode.
console.log("App is in inactive Mode.")
}
};
render() {
return (
<View style={styles.MainContainer}>
{/* <Routing /> */}
<Text>Current state is: {this.state.appState}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
color: '#000'
}
});
