Category: Camera

How to access camera in react native expo

Hello People. This article dicusses about how to access camera in react native expo. The camera feature in a mobile device allows it to capture pictures and record videos. It is very helpful in many circumstances. By using the expo-camera library the process of adding that camera feature to an application becomes seamless. We’ll take a look at how to use Expo Camera to take a picture.

Prerequisites

Please make sure you are familiarized with JavaScript/ES6 and meet the following requirements in your local dev environment:

  • Node.js version >= 14.x.x installed.
  • Access to one package manager such as npm or yarn or npx.
  • Expo-cli installed, or use npx
How to access camera in react native expo

Install the expo-camera in your React Native project by using the following command:

expo install expo-camera

You can also do this by using npm or yarn.

Open the folder structure and open the App.js file and Paste the following code:

import React, { useState, useEffect } from "react";
import {
Modal,
Text,
TouchableOpacity,
View,
Image,
} from "react-native";
import { Camera } from "expo-camera";
import { Button } from "react-native-paper";const CameraModule = (props) => {
const [cameraRef, setCameraRef] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);return (
<Modal
animationType="slide"
transparent={true}
visible={true}
onRequestClose={() => {
props.setModalVisible();
}}
>
<Camera
style={{ flex: 1 }}
ratio="16:9"
flashMode={Camera.Constants.FlashMode.on}
type={type}
ref={(ref) => {
setCameraRef(ref);
}}
>
<View
style={{
flex: 1,
backgroundColor: "transparent",
justifyContent: "flex-end",
}}
>
<View
style={{
backgroundColor: "black",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Button
icon="close"
style={{ marginLeft: 12 }}
mode="outlined"
color="white"
onPress={() => {
props.setModalVisible();
}}
>
Close
</Button> <TouchableOpacity
onPress={async () => {
if (cameraRef) {
let photo = await cameraRef.takePictureAsync();
props.setImage(photo);
props.setModalVisible();
}
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 50,
width: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: 16,
marginTop: 16,
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 40,
width: 40,
backgroundColor: "white",
}}
></View>
</View>
</TouchableOpacity> <Button
icon="axis-z-rotate-clockwise"
style={{ marginRight: 12 }}
mode="outlined"
color="white"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
{type === Camera.Constants.Type.back ? "Front" : "Back "}
</Button>
</View>
</View>
</Camera>
</Modal>
);
};export default function ImagePickerExample() { const [image, setImage] = useState(null);
const [camera, setShowCamera] = useState(false);
const [hasPermission, setHasPermission] = useState(null);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, justifyContent: "center", alignItems: "center" }}>
<View
style={{
backgroundColor: "#eeee",
width: 120,
height: 120,
borderRadius: 100,
marginBottom: 8,
}}
>
<Image
source={{ uri: image }}
style={{ width: 120, height: 120, borderRadius: 100 }}
/>
</View> <Button
style={{ width: "30%", marginTop: 16 }}
icon="camera"
mode="contained"
onPress={() => {
setShowCamera(true);
}}
>
Camera
</Button> {camera && (
<CameraModule
showModal={camera}
setModalVisible={() => setShowCamera(false)}
setImage={(result) => setImage(result.uri)}
/>
)}
</View>
);
}

To open the camera just click on the camera button. You can see that the expo camera is working.

Let’s see the coding functionality.

import React, { useState, useEffect } from "react";import { Modal, Text, TouchableOpacity, View, Image} from "react-native";import { Camera } from "expo-camera";import { Button } from "react-native-paper";

Above are the imports of the required libraries.

Now, create a functional component CameraModule.

const CameraModule = (props) => {
const [cameraRef, setCameraRef] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);return (
<Modal
animationType="slide"
transparent={true}
visible={true}
onRequestClose={() => {
props.setModalVisible();
}}
>
<Camera
style={{ flex: 1 }}
ratio="16:9"
flashMode={Camera.Constants.FlashMode.on}
type={type}
ref={(ref) => {
setCameraRef(ref);
}}

>
<View
style={{
flex: 1,
backgroundColor: "transparent",
justifyContent: "flex-end",
}}
>
<View
style={{
backgroundColor: "black",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Button
icon="close"
style={{ marginLeft: 12 }}
mode="outlined"
color="white"
onPress={() => {
props.setModalVisible();
}}
>
Close
</Button> <TouchableOpacity
onPress={async () => {
if (cameraRef) {
let photo = await cameraRef.takePictureAsync();
props.setImage(photo);
props.setModalVisible();
}
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 50,
width: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: 16,
marginTop: 16,
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 40,
width: 40,
backgroundColor: "white",
}}
></View>
</View>
</TouchableOpacity> <Button
icon="axis-z-rotate-clockwise"
style={{ marginRight: 12 }}
mode="outlined"
color="white"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
{type === Camera.Constants.Type.back ? "Front" : "Back "}
</Button>
</View>
</View>
</Camera>
</Modal>
);
};

In the above code, the Camera component has props like: style, ratio, flashMode, type, and ref.

Look below to know about props:

  1. style: this can be used for the styling of your camera app.
  2. ratio: a string representing the aspect ratio of the preview (default is 4:3).
  3. flashMode: the flash on your device will turn on when taking a picture, by using the constants Camera.Constants.flashMode.(on/off).
  4. type: for selecting camera type i.e. front or back, by using the constants provided by Camera.Constants.Type.(front/back) .
  5. ref: to use methods that Camera exposes like: CameraRef.takePictureAsync() .

There are some more properties that can be used in the camera app. See the docs expo-camera.

Now, let’s have a look at how to take a picture. Inside the TouchableOpacity there was the cameraRef. Which gives us different methods, one of which is “takePictureAsync()”. This method can be used to take a picture.

On the press of this component, we provide an async function which calls the takePicturesAsync() method from cameraRef.
So now we have the image inside the photo variable. It has a uri (a url of image) and passed the photo variable in the setImage function so that later we can use this uri to display our image.

      <TouchableOpacity
onPress={async () => {
if (cameraRef) {
let photo = await cameraRef.takePictureAsync();
props.setImage(photo);
props.setModalVisible();
}
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 50,
width: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: 16,
marginTop: 16,
}}
>
<View
style={{
borderWidth: 2,
borderRadius: 50,
borderColor: "white",
height: 40,
width: 40,
backgroundColor: "white",
}}
></View>
</View>
</TouchableOpacity>

Now, create a Button for changing type of camera, for this a “setType” function can be used that change the camera type.

         <Button
icon="axis-z-rotate-clockwise"
style={{ marginRight: 12 }}
mode="outlined"
color="white"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
{type === Camera.Constants.Type.back ? "Front" : "Back "}
</Button>

Now look below at the return function, here we create a camera button amd a circle to show the image. Now we will use the <CameraModule /> component which we created above, this CameraModule has a prop setImage that contains an image uri and sets that image uri in the image variable.

Pass that image uri to the <Image /> source prop and you can see the picture inside the circle.

return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<View
style={{
backgroundColor: "#eeee",
width: 120,
height: 120,
borderRadius: 100,
marginBottom: 8,
}}
>
<Image
source={{ uri: image }}
style={{ width: 120, height: 120, borderRadius: 100 }}
/>
</View> <Button
style={{ width: "30%", marginTop: 16 }}
icon="camera"
mode="contained"
onPress={() => {
setShowCamera(true);
}}
>
Camera
</Button> {camera && (
<CameraModule
showModal={camera}
setModalVisible={() => setShowCamera(false)}
setImage={(result) => setImage(result.uri)}
/>
)}
</View>
);

If you follow the above steps correctly, your camera should be working fine.

Hope this article about How to access camera in react native expo is useful to you and to read about multer library, please visit How to upload multiple files using multer

Navigation

× Contact Us