Our aim for this article is to understand the usage of BarCodeScanner component by Expo, by developing a simple Scanner app.
Before moving onto the development part, we need to initialize the project and install the dependencies. So, open up the terminal and enter the following commands:
expo init // Choose the Blank template when prompted
Move into the project folder and then run the following command:
expo install expo-barcode-scanner
Now that we have installed the scanner component, it’s time to write the code. Let us start by importing the required components, code for which is shown below:
Now it’s time to get inside the App class and carry out the development process step by step
Requesting the permission to access the camera:
In this step we are going to prompt user, for the permission to access camera. Status of this request is stored in the state of the component, code for which is shown below:
Now, inside the render function we are going to return different views depending upon the status of our request as show below:
After the user has given us the permission to access camera, we will return the BarCodeScanner component which is demonstrated in the next part.
Scan the code.
Got the permission, it’s time to move on to the BarCodeScanner Component.
It’s time to define the barCodeScanned function to access the response data which is demonstrated in the next step.
Access the response data.
We are going to alert the user with the response data as an example.
We have successfully completed the development process of this simple BarCodeScanner application.
Github Repo Link: https://github.com/notnotparas/expo-BarCodeScanner
API Reference: https://docs.expo.io/versions/latest/sdk/bar-code-scanner/
- Android & iOS App development using React Native with Expo
- What is the difference between React Native and React?
- How React Native works?
- Why You Should Choose React Native?
- Difference between React Native and Flutter
- How to Create Button in React-Native App ?
- How React Native Make Mobile App Development Simpler?
- Native MongoDB driver for Node
- Why is colspan not a known native attribute in Angular 2?
- How to use Typescript with native ES6 Promises ?
- Progressive Web App - A Combination of Native and Web App
- React.js (Introduction and Working)
- ReactJS | State in React
- Introduction to React-Redux
- Guess the number with React
- Difference between React.js and Angular.js
- How to Use Particles.js in React Project ?
- React.js | Uncontrolled Vs Controlled Inputs
- File uploading in React.js
- How to Deploy Your React Websites on GitHub?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.