Blur screen on app inactive

app/index.js

@@ -47,6 +47,7 @@ import TwoFactor from './containers/TwoFactor';
 import RoomsListView from './views/RoomsListView';
 import RoomView from './views/RoomView';
 import ScreenLockedView from './views/ScreenLockedView';
+import BlurView from './views/BlurView';
 
 if (isIOS) {
 	const RNScreens = require('react-native-screens');
@@ -740,6 +741,7 @@ export default class Root extends React.Component {
 						{content}
 						<TwoFactor />
 						<ScreenLockedView />
+						<BlurView />
 					</ThemeContext.Provider>
 				</Provider>
 			</AppearanceProvider>

app/lib/appStateMiddleware.js

@@ -9,22 +9,20 @@ export default () => createStore => (...args) => {
 	let currentState = '';
 
 	const handleAppStateChange = (nextAppState) => {
-		if (nextAppState !== 'inactive') {
-			if (currentState !== nextAppState) {
-				let type;
-				if (nextAppState === 'active') {
-					type = APP_STATE.FOREGROUND;
-				} else if (nextAppState === 'background') {
-					type = APP_STATE.BACKGROUND;
-				}
-				if (type) {
-					store.dispatch({
-						type
-					});
-				}
+		if (currentState !== nextAppState) {
+			let type;
+			if (nextAppState === 'active') {
+				type = APP_STATE.FOREGROUND;
+			} else if (nextAppState === 'background' || nextAppState === 'inactive') {
+				type = APP_STATE.BACKGROUND;
+			}
+			if (type) {
+				store.dispatch({
+					type
+				});
 			}
-			currentState = nextAppState;
 		}
+		currentState = nextAppState;
 	};
 
 	AppState.addEventListener('change', handleAppStateChange);

app/utils/localAuthentication.js

@@ -35,6 +35,17 @@ export const openModal = hasBiometry => new Promise((resolve) => {
 	});
 });
 
+export const requireAuthentication = (serverRecord) => {
+	// if screen lock is enabled
+	if (serverRecord?.autoLock) {
+		// diff to last authenticated session
+		const diffToLastSession = moment().diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
+
+		// if last authenticated session is older than configured auto lock time, authentication is required
+		return diffToLastSession >= serverRecord?.autoLockTime;
+	}
+	return false;
+};
 
 export const localAuthenticate = async(server) => {
 	const serversDB = database.servers;
@@ -47,32 +58,25 @@ export const localAuthenticate = async(server) => {
 		return Promise.reject();
 	}
 
-	// if screen lock is enabled
-	if (serverRecord?.autoLock) {
-		// diff to last authenticated session
-		const diffToLastSession = moment().diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
-
-		// if last authenticated session is older than configured auto lock time, authentication is required
-		if (diffToLastSession >= serverRecord?.autoLockTime) {
-			// Make sure splash screen has been hidden
-			RNBootSplash.hide();
-
-			let hasBiometry = false;
+	if (requireAuthentication(serverRecord)) {
+		// Make sure splash screen has been hidden
+		RNBootSplash.hide();
 
-			// if biometry is enabled on the app
-			if (serverRecord?.biometry) {
-				const isEnrolled = await LocalAuthentication.isEnrolledAsync();
-				hasBiometry = isEnrolled;
-			}
+		let hasBiometry = false;
 
-			// Authenticate
-			await openModal(hasBiometry);
+		// if biometry is enabled on the app
+		if (serverRecord?.biometry) {
+			const isEnrolled = await LocalAuthentication.isEnrolledAsync();
+			hasBiometry = isEnrolled;
 		}
 
-		//
-		await resetAttempts();
-		await saveLastLocalAuthenticationSession(server, serverRecord);
+		// Authenticate
+		await openModal(hasBiometry);
 	}
+
+	//
+	await resetAttempts();
+	await saveLastLocalAuthenticationSession(server, serverRecord);
 };
 
 export const supportedBiometryLabel = async() => {

app/views/BlurView.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import { connect } from 'react-redux';
+
+import database from '../lib/database';
+import { requireAuthentication } from '../utils/localAuthentication';
+
+const Blur = ({ appBackground, server }) => {
+	const [show, setShow] = useState(true);
+
+	const checkAuthentication = async() => {
+		const serversDB = database.servers;
+		const serversCollection = serversDB.collections.get('servers');
+
+		let serverRecord;
+		try {
+			serverRecord = await serversCollection.find(server);
+		} catch (error) {
+			return;
+		}
+
+		if (requireAuthentication(serverRecord)) {
+			setShow(true);
+		}
+	};
+
+	useEffect(() => {
+		if (appBackground) {
+			checkAuthentication();
+		} else {
+			setTimeout(() => {
+				setShow(false);
+			}, 300);
+		}
+	}, [appBackground]);
+
+	if (show) {
+		return (
+			<BlurView
+				style={{ ...StyleSheet.absoluteFill }}
+				blurAmount={10}
+			/>
+		);
+	}
+	return null;
+};
+
+Blur.propTypes = {
+	appBackground: PropTypes.string,
+	server: PropTypes.string
+};
+
+const mapStateToProps = state => ({
+	appBackground: state.app.background,
+	server: state.server.server
+});
+
+export default connect(mapStateToProps)(Blur);

ios/Podfile.lock

@@ -299,6 +299,8 @@ PODS:
     - React
   - react-native-background-timer (2.1.1):
     - React
+  - react-native-blur (0.8.0):
+    - React
   - react-native-cameraroll (1.3.0):
     - React
   - react-native-document-picker (3.2.4):
@@ -387,7 +389,7 @@ PODS:
     - Fabric
     - Firebase/Core
     - React
-  - RNGestureHandler (1.5.0):
+  - RNGestureHandler (1.6.1):
     - React
   - RNImageCropPicker (0.28.0):
     - React-Core
@@ -466,6 +468,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-appearance (from `../node_modules/react-native-appearance`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
+  - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-jitsi-meet (from `../node_modules/react-native-jitsi-meet`)
@@ -598,6 +601,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-appearance"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
+  react-native-blur:
+    :path: "../node_modules/@react-native-community/blur"
   react-native-cameraroll:
     :path: "../node_modules/@react-native-community/cameraroll"
   react-native-document-picker:
@@ -753,6 +758,7 @@ SPEC CHECKSUMS:
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
   react-native-appearance: 368f9d1160e3f1d7ecb5945e704affe018deef46
   react-native-background-timer: 1b6e6b4e10f1b74c367a1fdc3c72b67c619b222b
+  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
   react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
   react-native-jitsi-meet: 04ccc47303c62ba2b7e7407a113f5f46241ebd75
@@ -783,7 +789,7 @@ SPEC CHECKSUMS:
   RNDeviceInfo: 17e34f6dd902f08d88cbe2c0b7a01be948d43641
   RNFastImage: 9b0c22643872bb7494c8d87bbbb66cc4c0d9e7a2
   RNFirebase: ac0de8b24c6f91ae9459575491ed6a77327619c6
-  RNGestureHandler: a4ddde1ffc6e590c8127b8b7eabfdade45475c74
+  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNImageCropPicker: cf129d17e042ce3e96fb9ada967c28f21f977c82
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688
   RNReanimated: b2ab0b693dddd2339bd2f300e770f6302d2e960c