Additional security for React Native APP (PIN Lock)

screenLockWithPin.js

import React, {useState} from 'react';
import {View, Text, Alert, AppState} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import {connect} from 'react-redux';
import {login, loginSuccess} from '../redux/actions';
import {withTheme} from '@saypr/kanvaz-theme-controller';
import Svg, {Path} from 'react-native-svg';
import PINCode, {
  resetPinCodeInternalStates,
  deleteUserPinCode,
  hasUserSetPinCode,
} from '../components/PinCode';

const projectData = require('../projectData').default;

const OfflineIcon = ({color, ...props}) => (
  <Svg width="40" height="30" viewBox="0 0 15 19" {...props}>
    <Path
      d="M10.775 2.097l-6.79 6.79-.185.184-2.385 2.385A3.802 3.802 0 0 1 2.87 4.812 4.815 4.815 0 0 1 7.6.898c1.218 0 2.327.452 3.175 1.199zM19 9.257a3.04 3.04 0 0 1-3.04 3.04H4.875l-2.057 2.058-1.076-1.075 1.104-1.104.954-.954 3.357-3.357.321-.32 1.137-1.137 3.135-3.135.724-.724L14.499.524a.5.5 0 0 1 .707 0l.722.721-1.65 1.65c.483.212.913.514 1.268.883a3.684 3.684 0 0 1 1.045 2.504A3.043 3.043 0 0 1 19 9.258z"
      fill={color}
      fillRule="evenodd"
    />
  </Svg>
);

function InitialKanvaz(props) {
  const [showPinLock, setPINLockScreen] = useState(false);
  const [appState, setAppState] = useState(AppState.currentState);

  const resetPinState = async () => {
    return await resetPinCodeInternalStates();
  };

  const hasAlreadyAPin = async () => {
    return await hasUserSetPinCode();
  };

  const _finishProcess = async e => {
    const hasPin = await hasUserSetPinCode();

    if (hasPin) {
      deleteTimeStamp('bg');
      setPINLockScreen(false);
    } else {
      Alert.alert(null, 'You have successfully set App your pin.', [
        {
          title: 'Ok',
          onPress: () => {
            //   Nothing to do.
          },
        },
      ]);
    }
  };

  const handleAppStateChange = state => {
    setAppState(state);
  };

  const setBeforeGoBG = async date => {
    try {
      await AsyncStorage.setItem('bg', date);
    } catch (error) {
      console.log('Writing error1');
    }
  };

  const deleteTimeStamp = async key => {
    try {
      await AsyncStorage.removeItem(key);
    } catch (error) {
      console.log('Writing error2');
    }
  };

  const stateManager = () => {
    switch (appState) {
      case 'active': //The app is running in the foreground
        break;
      case 'background': // The app is running in the background. The user is either
        break;
      case 'inactive':
        // The app transitioning between foreground & background or entering the Multitasking view or in the event of an incoming call
        setBeforeGoBG(new Date().getTime());
        break;
      default:
        console.log('📱 App State changed');
    }
  };

  const pinChecker = async () => {
    const timestamp = await AsyncStorage.getItem('bg');
    if (
      timestamp !== null &&
      parseInt(timestamp) + 10000 < parseInt(new Date().getTime())
    ) {
      setPINLockScreen(true);
    } else {
      setPINLockScreen(false);
    }
  };

  

  React.useEffect(() => {
    //  resetPinState()

    AppState.addEventListener('change', handleAppStateChange);

    stateManager();

    async function checkLogin() {
      const loginScreen = projectData.screens.find(
        screen => screen.type === 'login',
      );
      if (loginScreen) {
        const token = await AsyncStorage.getItem('token');

        if ('a' === 'b') {
          props.navigation.navigate(loginScreen.name);
        } else {
          await pinChecker();
        }
      } else props.navigation.navigate(projectData.screens[0].name);
    }
    checkLogin();
  }, [props.navigation, stateManager]);

  if (showPinLock) {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: props.themeData.theme.colors.backgroundColor,
        }}>
        <PINCode
          status={hasAlreadyAPin ? 'enter' : 'choose'}
          touchIDDisabled={true}
          finishProcess={e => _finishProcess(e)}
          styleLockScreenMainContainer={{backgroundColor: '#222'}}
          colorPassword={'#77F490'}
          colorPasswordEmpty={'#E8A33C'}
          colorPasswordError={'#900900'}
          colorCircleButtons={props.themeData.theme.colors.backgroundColorAccent}
          numbersButtonOverlayColor={ props.themeData.theme.colors.primaryColor}
        />
      </View>
    );
  }

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Loading</Text>
    </View>
  );
}

const mapDispatchToProps = dispatch => ({
  loginSuccess: val => dispatch(loginSuccess(val)),
  loginRequest: val => dispatch(login(val)),
});
export default connect(
  null,
  mapDispatchToProps,
)(withTheme(InitialKanvaz));