# Showing app splashscreen in multitasking view - Thurs 29th Oct, 2020

To easily do this, you can hook into React Native's `AppState`:

export const App: React.FC = () => {
    const appState = useRef(AppState.currentState)
    const [appStateVisible, setAppStateVisible] = useState(appState.current)
    
    const handleAppStateChange = (nextAppState: AppStateStatus) => {
        appState.current = nextAppState
        setAppStateVisible(appState.current)
    }

    useEffect(() => {
        AppState.addEventListener('change', handleAppStateChange)
        return () => {
            AppState.removeEventListener('change', handleAppStateChange)
        }
    }, [])


    return (
        <>
            <Navigation />
            {appStateVisible === 'background' ||
                (appStateVisible === 'inactive' && (
                    <SplashScreen
                        style={{
                            // absolute position rather than unmount to preserve where the user is in the app
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            bottom: 0,
                            right: 0,
                        }}
                    />

                ))}
        </>

    )

}

A more secure way to explicitly not show any screen content when the app is backgrounded on Android is to hook into the window flag [FLAG_SECURE](https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_SECURE).

For my purposes, I felt this was unnecessary, and there is no direct equivalent in iOS.

###### tags: `programmingjournal` `2020` `C+` `security` `multitasking` `appstate` `splashscreen`