fix: black screen when CameraDisclosureModal is opened (#1021)

Signed-off-by: Caroline Lucas Calheirani <[email protected]>
Co-authored-by: Bryce McMath <[email protected]>

packages/legacy/core/App/components/modals/LoadingModal.tsx → packages/legacy/core/App/components/views/LoadingView.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { Modal, StyleSheet, useWindowDimensions } from 'react-native'
+import { StyleSheet, useWindowDimensions } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 import { useAnimatedComponents } from '../../contexts/animated-components'
 import { useTheme } from '../../contexts/theme'
 
-const LoadingModal: React.FC = () => {
+const LoadingView: React.FC = () => {
   const { height } = useWindowDimensions()
   const { LoadingTheme } = useTheme()
   const { LoadingIndicator } = useAnimatedComponents()
@@ -20,12 +20,10 @@ const LoadingModal: React.FC = () => {
   })
 
   return (
-    <Modal visible={true} transparent={true}>
-      <SafeAreaView style={[styles.container]}>
-        <LoadingIndicator />
-      </SafeAreaView>
-    </Modal>
+    <SafeAreaView style={[styles.container]}>
+      <LoadingIndicator />
+    </SafeAreaView>
   )
 }
 
-export default LoadingModal
+export default LoadingView

packages/legacy/core/App/screens/Scan.tsx

@@ -11,8 +11,8 @@ import Toast from 'react-native-toast-message'
 import NewQRView from '../components/misc/NewQRView'
 import QRScanner from '../components/misc/QRScanner'
 import CameraDisclosureModal from '../components/modals/CameraDisclosureModal'
-import LoadingModal from '../components/modals/LoadingModal'
 import { ToastType } from '../components/toast/BaseToast'
+import LoadingView from '../components/views/LoadingView'
 import { useStore } from '../contexts/store'
 import { BifoldError, QrCodeScanError } from '../types/error'
 import { ConnectStackParams, Screens, Stacks } from '../types/navigators'
@@ -150,7 +150,7 @@ const Scan: React.FC<ScanProps> = ({ navigation, route }) => {
   }, [])
 
   if (loading) {
-    return <LoadingModal />
+    return <LoadingView />
   }
 
   if (showDisclosureModal) {

packages/legacy/core/__tests__/screens/LoadingModal.test.tsx → packages/legacy/core/__tests__/components/LoadingView.test.tsx

@@ -1,30 +1,30 @@
 import { act, render } from '@testing-library/react-native'
 import React from 'react'
 
-import LoadingModal from '../../App/components/modals/LoadingModal'
+import LoadingView from '../../App/components/views/LoadingView'
 import { testIdWithKey } from '../../App/utils/testable'
 
 describe('displays loading screen', () => {
-  beforeAll(()=>{
+  beforeAll(() => {
     jest.useFakeTimers()
   })
-  afterAll(()=>{
+  afterAll(() => {
     jest.useRealTimers()
   })
   test('renders correctly', () => {
-    const tree = render(<LoadingModal />)
+    const tree = render(<LoadingView />)
 
     expect(tree).toMatchSnapshot()
   })
 
   test('contains testIDs', async () => {
     let tree: ReturnType<typeof render>
-    
-    tree = render(<LoadingModal />)
-    await act(()=>{
+
+    tree = render(<LoadingView />)
+    await act(() => {
       jest.runAllTimers()
     })
-    await act(async ()=>{
+    await act(async () => {
       const loadingActivityIndicatorID = await tree.findByTestId(testIdWithKey('LoadingActivityIndicator'))
       expect(loadingActivityIndicatorID).not.toBeNull()
     })

packages/legacy/core/__tests__/components/__snapshots__/LoadingView.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`displays loading screen renders correctly 1`] = `
+<RNCSafeAreaView
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#000000",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 1334,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+      }
+    }
+    testID="com.ariesbifold:id/LoadingActivityIndicator"
+  >
+    <Image
+      source={
+        Object {
+          "default": "",
+        }
+      }
+      style={
+        Object {
+          "height": "33%",
+          "width": "33%",
+        }
+      }
+      testID="com.ariesbifold:id/LoadingActivityIndicatorImage"
+    />
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+        }
+      }
+    >
+      <
+        fill="#FFFFFF"
+        height={200}
+        width={200}
+      />
+    </View>
+  </View>
+</RNCSafeAreaView>
+`;

packages/legacy/core/__tests__/screens/__snapshots__/Scan.test.tsx.snap

@@ -1,67 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Scan Screen Renders correctly 1`] = `
-<Modal
-  hardwareAccelerated={false}
-  transparent={true}
-  visible={true}
+<RNCSafeAreaView
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#000000",
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "minHeight": 1334,
+      },
+    ]
+  }
 >
-  <RNCSafeAreaView
+  <View
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#000000",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "minHeight": 1334,
-        },
-      ]
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+      }
     }
+    testID="com.ariesbifold:id/LoadingActivityIndicator"
   >
+    <Image
+      source={
+        Object {
+          "default": "",
+        }
+      }
+      style={
+        Object {
+          "height": "33%",
+          "width": "33%",
+        }
+      }
+      testID="com.ariesbifold:id/LoadingActivityIndicatorImage"
+    />
     <View
+      collapsable={false}
       style={
         Object {
-          "alignItems": "center",
-          "justifyContent": "center",
+          "position": "absolute",
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
         }
       }
-      testID="com.ariesbifold:id/LoadingActivityIndicator"
     >
-      <Image
-        source={
-          Object {
-            "default": "",
-          }
-        }
-        style={
-          Object {
-            "height": "33%",
-            "width": "33%",
-          }
-        }
-        testID="com.ariesbifold:id/LoadingActivityIndicatorImage"
+      <
+        fill="#FFFFFF"
+        height={200}
+        width={200}
       />
-      <View
-        collapsable={false}
-        style={
-          Object {
-            "position": "absolute",
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <
-          fill="#FFFFFF"
-          height={200}
-          width={200}
-        />
-      </View>
     </View>
-  </RNCSafeAreaView>
-</Modal>
+  </View>
+</RNCSafeAreaView>
 `;