Using camera in React-Native
Well, I’m currently working on a mobile application for a private company and I was asked for a photo upload feature. I had never worked with anything like that and at first, I thought I would have difficulty. But then, did I have difficulty? No way, it was even easy. I used a lib / module (as you want to call it) called React Native Image Picker.
It was perfect for the scenario I needed, because I also needed to send the file in the form of BASE64, via an api and this lib already provides this functionality. With this lib, it is possible to use the camera of the cell phone without any problem besides having the possibility to access the user’s photo gallery, a feature that came in handy because I implemented the functionality of sending a photo directly from the camera and sending a photo by choosing any photo from the gallery.
Enough introduction, let’s go to a practical and basic example.
At this point, I will assume that you already have an environment set up to work with React Native, so this point will not be covered. If you have not configured this, I strongly suggest you take a look at the official documentation, it is simple and very straightforward, just follow that there is no error: https://reactnative.dev/docs/environment-setup
To create a new React Native project, simply execute the command:
npx react-native init AwesomeCameraJust wait for the creation and installation of dependencies.
Then, the initial structure of the project should look something like this:
The App.js file, where we are going to do everything, should look something like this:
Now we will install the React-Native-Image-Picker lib / module, with the command:
npm install react-native-image-picker --saveoryarn add react-native-image-picker
You will also need to add some permissions on Android. Permission to use the camera and read storage.
In the file: AwesomeCamera/android/app/src/debug/AndroidManifest.xml
To make it all right, create a folder called assets and add these two images: dummy e galleryImages.
Let’s modify the App.js file, leaving the layout ready, as this is not the focus here, follow:
The layout of the application will look like this:
Access camera
To implement the functionality to launch the camera directly when you click on “Access camera”, use the code below. It will open the camera directly and show the image clicked on the image component.
Access gallery
To start the image library directly, you can use the following code. It will open the Image Library directly and show the selected image in the Image Component.
App.js
Conclusion
In this post, I wanted to show that you can implement the use of the camera in React Native in a very simple way using the lib React Native Image Picker. You can find the complete code in this repository here.
