By Camera access in react native app
In this blog, you will learn about how you can get camera access in your react native app. As a developer of a react native app development company, you will definitely want to choose such a framework that can provide functionality abroad with less effort. Then React Native framework is the best choice.
A camera app is not only needed for clicking pictures. These days, you need a camera for various scenarios. React Native framework
There are some prerequisite criteria that you need to meet and learn. Let’s see what those are.
Pre-required conditions
- First of all, you have to set up the dev environment in your system. This requires installing software like JDK, Android Studio, and others. Check this article on How to set up the React Native environment to get all the details.
- That’s all. Now let’s learn the key element that has made this app-building process much simpler. This is the React Native third-party library.
Third-party plugin- react-native-camera and react-native-image-crop-picker
This is the most important section that you cannot avoid. A strong knowledge of the use of React Native third-party libraries can help you in your journey as a developer. For this project, I have focused on two packages. One is the react-native-camera and the other one is the react-native-image-crop-picker. These packages make your code lines short and you don’t have to build a new Image component all by yourself. Just import the required components from the related third-party packages.
Seeking permission- Androidmanifest.xml file
Every android project has an androidmanifest.xml file stored in its root directory. You can find it in the path: android/app/src/main/AndroidManifest.xml. You might be thinking why I am specifying this in this project. This file contains all the important information about the built app, accessed permission, and the android OS. Check the Androidmanifest.xml file of this project to learn about the permission you need to seek to open the camera in your app.
Code syntax of the built Camera app
import {StyleSheet, Text, View, Button, Image} from ‘react-native’;
import React, {useState} from ‘react’;
import ImagePicker from ‘react-native-image-crop-picker’;
For using the React native components in the later part of the code, you have to import those components either from the React Native package or from the third-party React Native package. The syntax shows that the project uses StyleSheet, View, Button, Image, and Text from the react-native. Other than this, it imports React and useState from react. Lastly, it imports the native component image picker from the react-native-image-crop-picker. UseState is the React Native hook that this project will require to track the state of the variable pick.
If you need any component going forward in the codebase, you can simply add a comma and write the component name in your VS code editor. So you don’t need to worry about adding the component at first. Let’s get into the rest of the codelines.
export default function Camera() {
const [pick, setPick] = useState();
const cam = () => {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
}).then(image => {
console.log(image);
setPick(image);
});
};
- Here, as you can notice, I have used the export default statement to create JS modules further to export variables, objects, and functions. To be specific, you can use export default to export one function, variable, or object. Here, export default is used to export the function Camera().
- I used the useState hook to define two variables namely pick and setPick.
- A constant variable cam is created to open the ImagePicker. It is defined with specific parameters: a width of 300 pixels, a height of 400 pixels, and cropping are enabled as true.
- After you click the image with your camera, you need a certain function to print the image. For this use log() function to print the clicked picture on the log.
return (
<View>
<Text style={{textAlign: ‘center’, marginVertical: 10}}>
camera access
</Text>
- Here, the code snippets define that it returns a text element wrapped with a View The text will be shown as “camera access” with text alignment at the center and a vertical margin of 10 pixels.
<View style={{marginVertical: 20}}>
<Button
title=”camera”
onPress={() => {
cam();
}}
/>
<Image
source={{uri: pick.path}}
style={{
width: 200,
height: 200,
borderRadius: 50,
marginHorizontal: 30,
marginTop: 30,
}}
/>
)}
</View>
</View>
);
}
const styles = StyleSheet.create({});
- It shows that a Button component is integrated under the View It has the title “camera” on it.
- You have to use the onPress function to call the cam()
- Further, it has the Image source defined in the code syntax with specific styling (width, height, borderRadius, marginHorizontal, and marginTop).
This is all about the lines that you can find in the App.js folder of the GitHub repository.
Steps to test the app on the emulator
You just have to run some commands on the project terminal and you will be done with building and testing the camera app.
- Run npm install. Then run npx react-native run-android. This is specific to android devices only. We will create another blog for the iOS developers.
- After the Bundling is done, you will be directed to a screen similar to the below-shown image.
- You have to press the blue ‘Camera’ button. It will take you to the camera app.
- Follow the navigation direction to operate the app. It will be given at the bottom of your emulator.
Congratulations you are done with the entire process.
What's your reaction?
