React Native - Check Application is in Background or ForeGround with Time Diff - 10 seconds Move to Login Session Expired

 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'

}

});

React or Localhsot CORS Error to Solve in Server Side Filters

package com.drvijayy2k2;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import com.product.sr.global.utils.Constants;

/**
 * The Class ContextFilters
 * ******* THIS CONTROLLER IS THE COMMON filter for the API context, this will receive all the request/response ********
 *
 * @author drvijay
 */

@Component
@Order ( 1 )
public class ContextFilters implements Filter, Constants
{


    /*
     * (non-Javadoc)
     * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
     */
    @Override
    public void init ( FilterConfig arg0 ) throws ServletException
    {
    }

    /*
     * (non-Javadoc)
     * @see javax.servlet.Filter#destroy()
     */
    @Override
    public void destroy ()
    {
    }

    /*
     * (non-Javadoc)
     * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)
     */
    @Override
    public void doFilter ( ServletRequest request, ServletResponse response, FilterChain chain ) throws IOException, ServletException
    {
        try
        {
            HttpServletRequest req = (HttpServletRequest) request;
            HttpServletResponse res = (HttpServletResponse) response;

            res.setHeader ( "Access-Control-Allow-Origin", "*" );
            res.setHeader ( "Access-Control-Allow-Credentials", "true" );
            res.setHeader ( "Access-Control-Allow-Methods", "ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL" );
            res.setHeader ( "Access-Control-Max-Age", "3600" );
            res.setHeader ( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Key, Authorization" );

            if ( "OPTIONS".equalsIgnoreCase ( req.getMethod () ) )
            {
                res.setStatus ( HttpServletResponse.SC_OK );
            }
            else
            {
                chain.doFilter ( req, res );
            }

        }
        catch ( Exception e )
        {
            //error
        }
    }

}