Question 180079 in React native Question posted in
The official React Native documentation can be found here.

“Why am I getting ‘Unhandled promise rejection: TypeError: Cannot read property ‘getAvailableCameraDevices’ of null’ when using React Native Expo?”

After I have installed react-native-vision-camera using expo, I can not open the camera.

Here is my code:

const ScanProduct =({navigation})=>{

    // Camera
    const devices = useCameraDevices('wide-angle-camera')
    const device = devices.back

    React.useEffect(()=>{
      requestCameraPermission
  },[])

    // Handler
    const requestCameraPermission = React.useCallback(async ()=>{
        const permission = await Camera.requestCameraPermission();
        

        if(permission === 'denied') await Linking.openSettings()
    },[])


    function renderCamera(){
      
        if(device == null){
          return(
            <View
               style={{
                flex:1,
               }}
            />
          )

        } else{
          return(
            <View
              style={{
                flex:1
              }}
            >

              <Camera
                style={{flex:1}}
                device={device}
                isActive={true}
                enableZoomGesture
              
              />

            </View>
          )
        }
      
    }

    return(
        <View>

            {/*Camera*/}
            {renderCamera()}

        </View>
    )
}

Between I run the code on my iphone using Expo Go app and the app can run smoothly except the code camera above giving me this error TypeError: Cannot read property 'getAvailableCameraDevices' of null.
Anyone can help me out is highly appreciated

Tags:

2

Answers


  1. 0

    Perhaps you didn’t call the requestCameraPermission properly in use effect, missed to add ()!?

    requestCameraPermission();

    Also, you do not need to use "else", as "if" already has the return statement.

    const ScanProduct = ({ navigation }) => {
  // Camera
  const devices = useCameraDevices("wide-angle-camera");
  const device = devices.back;

  React.useEffect(() => {
    requestCameraPermission();
  }, []);

  // Handler
  const requestCameraPermission = React.useCallback(async () => {
    const permission = await Camera.requestCameraPermission();

    if (permission === "denied") await Linking.openSettings();
  }, []);

  function renderCamera() {
    if (device == null) {
      return <View style={{ flex: 1 }} />;
    }

    return (
      <View style={{ flex: 1 }}>
        <Camera
          style={{ flex: 1 }}
          device={device}
          isActive={true}
          enableZoomGesture
        />
      </View>
    );
  }

  return (
    <View>
      {/*Camera*/}
      {renderCamera()}
    </View>
  );
};

    or I would rather

    const style = { flex: 1 }

const ScanProduct = ({ navigation }) => {
 // Permissions and useEffect...

  function RederCamera() {
    if (!device) return </>;

    return (          
      <Camera
        style={style}
        device={device}
        isActive={true}
        enableZoomGesture
      />          
    );
  }

  return (
    <View style={style}>
      <RederCamera />
    </View>
  );
};

    Also below should work without </>

    if (!device) return

    Or just

      return (
    <View>
      {devive ? (
        <Camera style={style} device={device} isActive={true} enableZoomGesture />
      ) : null}
    </View>
  );
    Login or Signup to reply.
  2. 0

    This error seems like a build issue. After installing the npm package and add the plugin in you app.json

    {
  "name": "my app",
  "plugins": [
    [
      "react-native-vision-camera",
      {
        "cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",

        // optionally, if you want to record audio:
        "enableMicrophonePermission": true,
        "microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
      }
    ]
  ]
}

    Then you need to rebuild your app by typing. Don’t forget to change the platform and profile attributes based on your need.

    eas build --platform ios --profile development
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search