Fix isAvailable Camera bug for web app on iOS devices

Author: natsukiai

packages/react-native/src/components/Camera/index.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash.noop';
 
-import { StyleSheet } from 'react-native';
+import { View, Platform, StyleSheet } from 'react-native';
 import { Camera as ExpoCamera } from 'expo-camera';
 
 import utils from '../utils';
@@ -25,7 +25,7 @@ function Camera({
 }) {
   // STATE
   const [camera, setCamera] = useState();
-  useCameraAsync();
+  const [cameraCanMount] = useCameraAsync();
 
   const cameraStyle = useMemo(() => {
     // eslint-disable-next-line import/no-named-as-default-member
@@ -44,9 +44,9 @@ function Camera({
   }, [camera, onCameraReady]);
 
   // RENDERERS
-  // if (!cameraCanMount) {
-  //   return <View />;
-  // }
+  if (Platform.OS === 'web' && utils.getOS() === 'iOS' && !cameraCanMount) {
+    return <View />;
+  }
 
   return (
     <ExpoCamera

packages/react-native/src/components/utils.js

@@ -33,9 +33,33 @@ function getContainedSizes(ratio) {
   };
 }
 
+function getOS() {
+  const userAgent = window.navigator.userAgent;
+  const platform = window.navigator.platform;
+  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
+  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
+  const iosPlatforms = ['iPhone', 'iPad', 'iPod'];
+  let os = null;
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = 'Mac OS';
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os = 'iOS';
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = 'Windows';
+  } else if (/Android/.test(userAgent)) {
+    os = 'Android';
+  } else if (/Linux/.test(platform)) {
+    os = 'Linux';
+  }
+
+  return os;
+}
+
 export default {
   styles: {
     flex,
     getContainedSizes,
   },
+  getOS,
 };

packages/react-native/src/hooks/useCameraAsync/index.js

@@ -3,6 +3,8 @@ import { Platform } from 'react-native';
 import { Camera } from 'expo-camera';
 import * as ScreenOrientation from 'expo-screen-orientation';
 
+import utils from '../../components/utils';
+
 /**
  * @returns {[unknown, {isAvailable: null, hasPermission: null, isLockInLandscape: null}]}
  */
@@ -12,34 +14,38 @@ export default function useCameraAsync() {
     [],
   );
 
+  const isAlwaysAvailable = useMemo(
+    () => Platform.OS !== 'web' && utils.getOS() !== 'iOS',
+    [],
+  );
+
   const [cameraAsync, setCameraAsync] = useState({
     hasPermission: null,
-    // isAvailable: null, // isAvailable was causing issues on Android web apps
+    isAvailable: isAlwaysAvailable,
     isLockInLandscape: null,
   });
 
   const cameraCanMount = useMemo(() => {
     const {
       hasPermission,
-      // isAvailable,
+      isAvailable,
       isLockInLandscape,
     } = cameraAsync;
 
-    // return hasPermission && isAvailable && isLockInLandscape;
-    return hasPermission && isLockInLandscape;
+    return hasPermission && isAvailable && isLockInLandscape;
   }, [cameraAsync]);
 
   useEffect(() => {
     (async () => {
       const { status } = await Camera.requestPermissionsAsync();
-      // const isAvailable = isNative || await Camera.isAvailableAsync();
+      const isAvailable = isAlwaysAvailable || await Camera.isAvailableAsync();
       const isLockInLandscape = !isNative || await ScreenOrientation.lockAsync(
         ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
       );
 
       setCameraAsync({
         hasPermission: status === 'granted',
-        // isAvailable,
+        isAvailable,
         isLockInLandscape,
       });
     })();
@@ -51,7 +57,7 @@ export default function useCameraAsync() {
         );
       }
     };
-  }, [isNative]);
+  }, [isAlwaysAvailable, isNative]);
 
   return [cameraCanMount, cameraAsync];
 }