perf: Make getCameraPermission and getMicrophonePermission synchronous (#2302)

package/example/src/App.tsx

@@ -1,12 +1,12 @@
 import { NavigationContainer } from '@react-navigation/native'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { PermissionsPage } from './PermissionsPage'
 import { MediaPage } from './MediaPage'
 import { CameraPage } from './CameraPage'
 import { CodeScannerPage } from './CodeScannerPage'
 import type { Routes } from './Routes'
-import { Camera, CameraPermissionStatus } from 'react-native-vision-camera'
+import { Camera } from 'react-native-vision-camera'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { StyleSheet } from 'react-native'
 import { DevicesPage } from './DevicesPage'
@@ -14,21 +14,11 @@ import { DevicesPage } from './DevicesPage'
 const Stack = createNativeStackNavigator<Routes>()
 
 export function App(): React.ReactElement | null {
-  const [cameraPermission, setCameraPermission] = useState<CameraPermissionStatus>()
-  const [microphonePermission, setMicrophonePermission] = useState<CameraPermissionStatus>()
-
-  useEffect(() => {
-    Camera.getCameraPermissionStatus().then(setCameraPermission)
-    Camera.getMicrophonePermissionStatus().then(setMicrophonePermission)
-  }, [])
+  const cameraPermission = Camera.getCameraPermissionStatus()
+  const microphonePermission = Camera.getMicrophonePermissionStatus()
 
   console.log(`Re-rendering Navigator. Camera: ${cameraPermission} | Microphone: ${microphonePermission}`)
 
-  if (cameraPermission == null || microphonePermission == null) {
-    // still loading
-    return null
-  }
-
   const showPermissionsPage = cameraPermission !== 'granted' || microphonePermission === 'not-determined'
   return (
     <NavigationContainer>

package/example/src/CameraPage.tsx

@@ -31,7 +31,7 @@ type Props = NativeStackScreenProps<Routes, 'CameraPage'>
 export function CameraPage({ navigation }: Props): React.ReactElement {
   const camera = useRef<Camera>(null)
   const [isCameraInitialized, setIsCameraInitialized] = useState(false)
-  const [hasMicrophonePermission, setHasMicrophonePermission] = useState(false)
+  const hasMicrophonePermission = useMemo(() => Camera.getMicrophonePermissionStatus() === 'granted', [])
   const zoom = useSharedValue(0)
   const isPressingButton = useSharedValue(false)
 
@@ -131,10 +131,6 @@ export function CameraPage({ navigation }: Props): React.ReactElement {
     // Run everytime the neutralZoomScaled value changes. (reset zoom when device changes)
     zoom.value = neutralZoom
   }, [neutralZoom, zoom])
-
-  useEffect(() => {
-    Camera.getMicrophonePermissionStatus().then((status) => setHasMicrophonePermission(status === 'granted'))
-  }, [])
   //#endregion
 
   //#region Pinch to Zoom Gesture