How to access camera in react native expo?

Question

This is the code I am implementing to access camera in React Native Expo App. But this code is not working. It only shows blank screen and nothing else. Please suggest me if any changes required or any alternate method to implement this.

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={type}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}>
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}>
            <Text style={{ fontSize: 18, marginBottom: 50, color: 'red' }}> Flip </Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

Answer 1

It looks like somehow you have denied permission in App. Also In the code, if hasPermission is null you will see a blank page. Note: In Ios, if you have denied or granted permission once, then the app will never show permission popup again until you use linking and let the user enable permission from setting.

Answer 2

The Camera component shouldn't in the <SafeAreaView>

<YOUR_CAMERA_COMPONENT /> /* <-- when outside the <SafeAreaView> , it work!*/

<SafeAreaView>
    <YOUR_CAMERA_COMPONENT />  /* <-- it will show blank view */
</SafeAreaView>

I solved the problem when removed the <Camera /> from <SafeAreaView />

Answer 3

Firstly i am using:

"expo": "~40.0.0",

now im upgrading the cli and then using expo upgrade and everything fix itself:

"expo": "^41.0.0",
"expo-camera": "~11.0.2",
"expo-cli": "^4.4.1",
"expo-image-picker": "~10.1.4",
"expo-status-bar": "~1.0.4",
"firebase": "8.2.3",

Answer 4

It looks like the Camera.requestPermissionsAsync is now deprecated. You might try using Camera.requestCameraPermissionsAsync(). After I updated my code the deprecation notice disappeared.

Answer 5

The emulator camera doesn't support this library , try using in Android or Ios device and it will work perfectly fine.

Please check this example or the original Expo-camera library.

Hope it helps .feel free for doubts

Answer 6

I saw your code and I feels this code same as a expo-camera documentation. I think you are trying this code on Emulator/Simulator . please try once on Physical Device . because emulator doesn't support camera. you can read the document in brief https://docs.expo.io/versions/latest/sdk/camera/#requestpermissionsasync