From 50028958eb27949e1d19ba25bbf5a26c242527dc Mon Sep 17 00:00:00 2001
From: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:14:36 +0100
Subject: [PATCH] fix: [IOBP-972] Vision camera functionality has been
 restricted by the operating system (#6410)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short description
This pull request includes changes to the
`BarcodeScanBaseScreenComponent` to address an issue where a black
screen appears when the app is not in an active state.

## List of changes proposed in this pull request
- Implemented a `useEffect` to update the app state and background
status when the app state changes
- Updated the `isDisabled` property to also check if the app is in the
background, ensuring the barcode scanner is disabled when the app is not
active

## How to test
‼️**Use a physical device**‼️ To test the old behavior omit the
`isAppInBackground` flag.
- Add some logs to the `BarcodeScanBaseScreenComponent.tsx` file:
```
React.useEffect(() => {
    const subscription = AppState.addEventListener("change", nextAppState => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
      ) {
        console.log("App has come to the foreground!");
      }

      // eslint-disable-next-line functional/immutable-data
      appState.current = nextAppState;
      setIsAppInBackground(appState.current !== "active");
      console.log("AppState", appState.current);
    });

    return () => {
      subscription.remove();
    };
  }, []);
```
- Tap on `Inquadra`
- Switch to the device's `Camera` application without closing the
`io-app`. Observe if an error is logged while switching.
- Minimize the `io-app` and return to the device's home screen without
closing the app. Wait for approximately one/two minutes and check if any
errors are logged during this time.
- Reopen the `io-app` from the background and verify that the scanner
screen do not appears black and works as expected.

## Preview
| Without `isAppInBackground` | With `isAppInBackground` |
|--------|--------|
| <img width="902" alt="Screenshot 2024-11-15 at 17 26 27"
src="https://github.com/user-attachments/assets/2210ca95-64ad-4bb6-ae04-38aecf37f54f">
| <img width="902" alt="Screenshot 2024-11-15 at 17 30 17"
src="https://github.com/user-attachments/assets/a819c230-597c-47df-96a8-97368a2ac7aa">|

Co-authored-by: Alessandro <alessandro.izzo998@gmail.com>
---
 .../BarcodeScanBaseScreenComponent.tsx        | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx b/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
index 005806e9156..5ac7e5dd407 100644
--- a/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
+++ b/ts/features/barcode/components/BarcodeScanBaseScreenComponent.tsx
@@ -11,7 +11,7 @@ import {
   useRoute
 } from "@react-navigation/native";
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { AppState, StyleSheet, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import {
   SafeAreaView,
@@ -134,11 +134,32 @@ const BarcodeScanBaseScreenComponent = ({
 
   const currentScreenName = useIOSelector(currentRouteSelector);
 
+  const [isAppInBackground, setIsAppInBackground] = React.useState(
+    AppState.currentState !== "active"
+  );
+
   const dispatch = useIODispatch();
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);
   const canShowHelp = useIOSelector(canShowHelpSelector);
   const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig);
 
+  /**
+   * Updates the app state when it changes.
+   *
+   * @param {string} nextAppState - The next state of the app.
+   *
+   * @returns {void}
+   */
+  React.useEffect(() => {
+    const subscription = AppState.addEventListener("change", nextAppState => {
+      setIsAppInBackground(nextAppState !== "active");
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   useFocusEffect(
     React.useCallback(() => {
       trackBarcodeScanScreenView(barcodeAnalyticsFlow);
@@ -190,7 +211,7 @@ const BarcodeScanBaseScreenComponent = ({
     onBarcodeError,
     barcodeFormats,
     barcodeTypes,
-    isDisabled: !isFocused || isDisabled,
+    isDisabled: isAppInBackground || !isFocused || isDisabled,
     isLoading
   });