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>
  );
}

you are using the code from https://docs.expo.io/versions/latest/sdk/camera/ which works, the camera doesn't work on the emulator. — Junius L, Dec 26 '19 at 06:37
it's working on my device try this snack https://snack.expo.io/?platform=android&name=Basic%20Camera%20usage&sdkVersion=36.0.0&dependencies=expo-camera&sourceUrl=https%3A%2F%2Fdocs.expo.io%2Fstatic%2Fexamples%2Fv36.0.0%2Fcamera.js — Junius L, Dec 26 '19 at 06:55
Sir actually I am getting this error in my console-> "[Unhandled promise rejection: TypeError: _expoCamera.Camera.requestPermissionsAsync is not a function. (In '_expoCamera.Camera.requestPermissionsAsync()', '_expoCamera.Camera.requestPermissionsAsync' is undefined)]" — HIMANSHU MISHRA, Dec 26 '19 at 07:05

score 1 · Accepted Answer · answered Jul 14 '20 at 11:44

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.

score 1 · Answer 2 · answered Dec 26 '21 at 05:36

1

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

answered Dec 26 '21 at 05:36

M_66

299
5
19

Thanks `Camera.getCameraPermissionsAsync()` is deprecated `Camera.requestCameraPermissionsAsync()` works fine. – Shakir Baba Sep 23 '22 at 06:58

score 0 · Answer 3 · answered Mar 07 '21 at 17:31

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 />

score 0 · Answer 4 · answered Apr 22 '21 at 05:07

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",

Anuj Sharma · Answer 5 · 2019-12-26T06:45:18.490

-1

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

edited Dec 26 '19 at 06:45

answered Dec 26 '19 at 06:20

Anuj Sharma

429
6
17

the above code works, OP is using the code on emulator. – Junius L Dec 26 '19 at 06:36
Sir actually I am getting this error in my console-> "[Unhandled promise rejection: TypeError: _expoCamera.Camera.requestPermissionsAsync is not a function. (In '_expoCamera.Camera.requestPermissionsAsync()', '_expoCamera.Camera.requestPermissionsAsync' is undefined)]" – HIMANSHU MISHRA Dec 26 '19 at 07:09
try this https://stackoverflow.com/questions/38842499/react-native-possible-unhandled-promise-rejection – Anuj Sharma Dec 26 '19 at 07:35
Sir I am not getting this – HIMANSHU MISHRA Dec 26 '19 at 07:56
cheack this example link and read it it will make you understand better. – Anuj Sharma Dec 26 '19 at 09:15

score -2 · Answer 6 · answered Dec 26 '19 at 06:42

-2

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

answered Dec 26 '19 at 06:42

shammi

1,301
1
10
25

Yes it is the same code and I am running it on Phone not on emulator – HIMANSHU MISHRA Dec 26 '19 at 06:53
@HimanshuMishra try this https://snack.expo.io/?platform=android&name=Basic%20Camera%20usage&sdkVersion=36.0.0&dependencies=expo-camera&sourceUrl=https%3A%2F%2Fdocs.expo.io%2Fstatic%2Fexamples%2Fv36.0.0%2Fcamera.js – Junius L Dec 26 '19 at 06:54
okay . then you should try `expo-permissions` and added this code in your project `import * as Permissions from 'expo-permissions';` `getPermissionAsync = async () => { if (Constants.platform.ios) { const { status } = await Permissions.askAsync(Permissions.CAMERA); if (status !== 'granted') { alert('Sorry, we need camera roll permissions to make this work!'); } } }` – shammi Dec 26 '19 at 06:55
Sir actually I am getting this error in my console-> "[Unhandled promise rejection: TypeError: _expoCamera.Camera.requestPermissionsAsync is not a function. (In '_expoCamera.Camera.requestPermissionsAsync()', '_expoCamera.Camera.requestPermissionsAsync' is undefined)]" – HIMANSHU MISHRA Dec 26 '19 at 07:08
look at this once https://stackoverflow.com/a/51179694/9444013 – shammi Dec 26 '19 at 07:20
Sir I am using Android Phone. – HIMANSHU MISHRA Dec 26 '19 at 07:30

How to access camera in react native expo?

6 Answers6