moved a bunch of pinCode modal logic out of application container

src/redux/actions/applicationActions.ts

@@ -48,7 +48,7 @@ export const isLoginDone = () => ({
   type: IS_LOGIN_DONE,
 });
 
-export const openPinCodeModal = (payload) => ({
+export const openPinCodeModal = (payload = null) => ({
   payload,
   type: OPEN_PIN_CODE_MODAL,
 });

src/screens/application/container/applicationContainer.tsx

@@ -10,7 +10,6 @@ import { NavigationActions } from 'react-navigation';
 import { bindActionCreators } from 'redux';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { isEmpty, some } from 'lodash';
-import { useDarkMode } from 'react-native-dynamic';
 import messaging from '@react-native-firebase/messaging';
 import PushNotification from 'react-native-push-notification';
 import VersionNumber from 'react-native-version-number';
@@ -420,22 +419,10 @@ class ApplicationContainer extends Component {
     );
   };
 
+  
   _handleAppStateChange = (nextAppState) => {
     const { appState } = this.state;
-    const { isPinCodeOpen: _isPinCodeOpen } = this.props;
-    getExistUser().then((isExistUser) => {
-      if (isExistUser) {
-        if (appState.match(/active|forground/) && nextAppState === 'inactive') {
-          this._startPinCodeTimer();
-        }
 
-        if (appState.match(/inactive|background/) && nextAppState === 'active') {
-          if (_isPinCodeOpen) {
-            clearTimeout(this._pinCodeTimer);
-          }
-        }
-      }
-    });
     if (appState.match(/inactive|background/) && nextAppState === 'active') {
       this._refreshGlobalProps();
     }
@@ -445,15 +432,6 @@ class ApplicationContainer extends Component {
     });
   };
 
-  _startPinCodeTimer = () => {
-    const { dispatch, isPinCodeOpen: _isPinCodeOpen } = this.props;
-
-    if (_isPinCodeOpen) {
-      this._pinCodeTimer = setTimeout(() => {
-        dispatch(openPinCodeModal());
-      }, 1 * 60 * 1000);
-    }
-  };
 
   _fetchApp = async () => {
     await this._getSettings();
@@ -674,11 +652,11 @@ class ApplicationContainer extends Component {
         // TODO:
         await switchAccount(realmObject[0].username);
       }
-      const isExistUser = await getExistUser();
+
 
       realmObject[0].name = currentUsername;
       // If in dev mode pin code does not show
-      if ((!isExistUser || !pinCode) && _isPinCodeOpen) {
+      if (_isPinCodeOpen) {
         dispatch(openPinCodeModal());
       } else if (!_isPinCodeOpen) {
         const encryptedPin = encryptKey(Config.DEFAULT_PIN, Config.PIN_KEY);

src/screens/application/index.tsx

@@ -10,6 +10,7 @@ import { Modal } from '../../components';
 import { PinCode } from '../pinCode';
 import ErrorBoundary from './screen/errorBoundary';
 import { setDeviceOrientation } from '../../redux/actions/uiAction';
+import PinCodeModal from './screen/pinCodeModal';
 
 const Application = () => {
   const dispatch = useDispatch();
@@ -48,15 +49,9 @@ const Application = () => {
 
             <WelcomeModal onModalVisibilityChange={setWelcomeModalVisible} />
 
-            <Modal
-              isOpen={isPinCodeRequire && !welcomeModalVisible}
-              isFullScreen
-              swipeToClose={false}
-              backButtonClose={false}
-              style={{ margin: 0 }}
-            >
-              <PinCode />
-            </Modal>
+            <PinCodeModal welcomeModalVisible={welcomeModalVisible} />
+            
+            
 
             {isRenderRequire && (
               <ApplicationScreen

src/screens/application/screen/pinCodeModal.tsx

@@ -0,0 +1,77 @@
+
+import React, { useEffect, useRef } from 'react'
+import { AppState } from 'react-native';
+import { Modal } from '../../../components';
+import { useAppDispatch, useAppSelector } from '../../../hooks'
+import { getExistUser } from '../../../realm/realm';
+import { openPinCodeModal } from '../../../redux/actions/applicationActions';
+import PinCode from '../../pinCode';
+
+interface PinCodeModalProps {
+    welcomeModalVisible: boolean;
+}
+
+const PinCodeModal = ({ welcomeModalVisible }: PinCodeModalProps) => {
+    const dispatch = useAppDispatch();
+
+    const pinCodeTimer = useRef<any>(null);
+    const appState = useRef(AppState.currentState);
+
+    const isPinCodeRequire = useAppSelector(state => state.application.isPinCodeRequire);
+    const isPinCodeOpen = useAppSelector(state => state.application.isPinCodeOpen);
+
+
+    useEffect(() => {
+        AppState.addEventListener('change', _handleAppStateChange);
+        return _unmount
+    }, [])
+
+
+    const _unmount = () => {
+        AppState.removeEventListener('change', _handleAppStateChange);
+    }
+
+
+    const _handleAppStateChange = (nextAppState) => {
+        getExistUser().then((isExistUser) => {
+            if (isExistUser) {
+                if (appState.current.match(/active|forground/) && nextAppState === 'inactive') {
+                    _startPinCodeTimer();
+                }
+
+                if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+                    if (isPinCodeOpen && pinCodeTimer.current) {
+                        clearTimeout(pinCodeTimer.current);
+                    }
+                }
+            }
+        });
+
+        appState.current = nextAppState;
+    };
+
+
+
+    const _startPinCodeTimer = () => {
+        if (isPinCodeOpen) {
+            pinCodeTimer.current = setTimeout(() => {
+                dispatch(openPinCodeModal());
+            }, 1 * 60 * 1000);
+        }
+    };
+
+
+    return (
+        <Modal
+            isOpen={isPinCodeRequire && !welcomeModalVisible}
+            isFullScreen
+            swipeToClose={false}
+            backButtonClose={false}
+            style={{ margin: 0 }}
+        >
+            <PinCode />
+        </Modal>
+    )
+}
+
+export default PinCodeModal

src/screens/application/screen/welcomeModal.tsx

@@ -13,11 +13,11 @@ import LaunchScreen from '../../launch';
 
 import styles from './welcomeStyles';
 
-const WelcomeModal = ({onModalVisibilityChange}) => {
+const WelcomeModal = ({ onModalVisibilityChange }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const lastAppVersion = useAppSelector(state=>state.application.lastAppVersion)
+  const lastAppVersion = useAppSelector(state => state.application.lastAppVersion)
 
   const [showAnimation, setShowAnimation] = useState(true);
   const [showWelcomeModal, setShowWelcomeModal] = useState(false);
@@ -29,30 +29,26 @@ const WelcomeModal = ({onModalVisibilityChange}) => {
   }, [])
 
 
-  useEffect(() => {
-    if (showAnimation) {
-      setTimeout(() => {
-        setShowAnimation(false);
-      }, 3550);
-    }
-  }, [showAnimation]);
-
-
   const _compareAppVersion = () => {
-    if(!lastAppVersion || (parseVersionNumber(lastAppVersion) < parseVersionNumber(appVersion))){
-      setShowWelcomeModal(true);
-      onModalVisibilityChange(true)
-    } 
+    if (!lastAppVersion || (parseVersionNumber(lastAppVersion) < parseVersionNumber(appVersion))) {
+      _showWelcomeModal();
+    }
+  }
+
+  const _showWelcomeModal = () => {
+    setShowWelcomeModal(true);
+    onModalVisibilityChange(true);
+    setShowAnimation(true);
+    setTimeout(() => {
+      setShowAnimation(false);
+    }, 3550);
   }
 
 
   const _handleButtonPress = () => {
     dispatch(setLastAppVersion(appVersion))
     setShowWelcomeModal(false);
-    setTimeout(()=>{
-      onModalVisibilityChange(false)
-    }, 100)
-    
+    onModalVisibilityChange(false);
   }