Building Camera Access Features in React Native App

Adding the Camera features to your app may sound difficult but with React Native App framework, it needs hardly any effort and some prior knowledge. Let’s see how React native development agencies have been achieving this.

Learning to build a camera app can give you a multitude of benefits such as you can make a QR scanning app, add image cropping features and add features that may require a camera.

Pre-Required Context

• Setting up the system environment- Here, I meant to say that you as a React Native development agency should install software for editing the code and running the emulator. Get a detailed idea from the article on what and how you can sync your dev system with the React Native App environment.
• You should have a basic idea of building a React Native app.

Use of React Native Components, Third-Party plugins, and other objects

Text- This is a React Native app component and is used to display text. You can style the defined text element with different parameters. For this, you have to consider the inline styling method.

In this project, I have  designed a text element with the following code syntax

<Text style={{textAlign: ‘center’, marginVertical: 10}}>

camera access

</Text>

Here, the text ‘camera access’ has the text alignment at the center and 10 pixels as its vertical margin.

View – It is one of the React Native app components without which you cannot design the app’s UI. It supports the fundamental layout with accessibility controls, touch-handling features, a flexbox, and other styling options. You can have other React Native app components as a child component of the View component.

I have used the View component in the following two ways for this current project.

<View>

<Text style={{textAlign: ‘center’, marginVertical: 10}}>

camera access

</Text>

You can see that I have added the Text component under the View component.

Another way of using the View component that you can notice in the later part of the codebase includes as given below.

<View style={{marginVertical: 20}}>

<Button

title=”camera”

onPress={() => {

cam();

Here, a Button component with an onPress Handle is wrapped with the View component.

Button – You import a Button component from the react-native package to render a pressable button in your app. You can also customize the component with styling. The react Native props usually used with this component include title, onPress, accessibilityLabel, and color.

For this app-building process, I have used the  component in  the following manner

<Button

title=”camera”

onPress={() => {

cam();

}}

/>

It has the onPress prop, which on calling enables the constant cam() function.

Image –  It is a  component used in the React Native app framework to display images. For fetching images from the local drive, you have to specify the path or its source. The props that are used with this React Native app component include accessible, accessibilityLabel, blurRadius, defaultsource, onLoad, onError, onProgress, and others.

Here, I have used the Image component in the given manner.

<Image

source={{uri: pick.path}}

style={{

width: 200,

height: 200,

borderRadius: 50,

marginHorizontal: 30,

marginTop: 30,

}}

/>

As you see that a source for the Image has been defined. I used the uri as the pick.path. Further, if you want to style the component, you need to adopt the stated parameters (width, borderRadius, marginTop, marginHorizontal, and height).

StyleSheet – It is a React Native app component used for styling and designing components and objects. You have to import the component from the react-native package.

Although in this project, I imported the StyleSheet component from the required container, I did not use it. It is because this project is about getting camera access in the app.

However, consider the following code syntax, if you want to know the use of StyleSheet.

const styles = StyleSheet.create({

container: {

flex: 2,

padding: 30,

backgroundColor: “#ffe4c4”

},

useState –  From version 16.8, useState hook is added to the React Native. If you don’t want to use class components, you can use this hook to track the state of the defined variable. However, you need to import this hook from the react package at the top lines of your codebase. With the useState hook, you can add any state to the function component.

For this project, consider the below-given syntax.

const [pick, setPick] = useState()

I defined the variable pick and used the useState to set its state.

React-native-image-crop-picker- It is a third-party React Native plugin. For camera access, you have to import the ImagePicker component from this package. Also, you can access different functionalities such as cropping images and selecting multiple images from the package.

ImagePicker – ImagePicker is an RN module that you can use to select videos or photos from the local drive or directly from the camera. Note that you have to set the permission in the app’s Androidmanifest.xml file.

console.log() – You can use the console.log() function to debug the app while it is in the development state. You can print the details included in this function.

Find the entire project in the GitHub repository.

Testing the Camera App

You can either test the app on your actual device or in the emulator. Here, I will show the process of running the app on the emulator. Follow the below-given pointers.

➔     Firstly, you have to run the command npm install on the command prompt.

➔     Next, type npx react-native run-android on the same terminal. You will start the emulator eventually. Wait for some time, it will open the app with a blue button on it.

➔     Note that, if you don’t have any images saved in your folder, you need to download them from the internet.

➔     For this, you have to sign in to your Google account from the emulator and download one picture.

➔     Start the app, and click on the downloaded image. After clicking the picture, it will set the image on the defined frame. Refer to the image shown below for the final output.

Summary

This is one of the most important features of the phone, not only for clicking pictures but also for a multitude of functionalities. Check this article and build your own camera app. Also, you can customize the app with different pressable buttons, colors, and other props.