In Home.js, we’ll add a button to navigate to our new screen, the QRCodeScanner:Īfter this, our app will have two screens, and we’ll set the second one to scan our QRCode:įor the second part of this tutorial, we’ll adjust our QRCodeScannerScreen to scan the QR Code and pass the data to another screen where it will be displayed.įirst, in the QRCodeScannerScreen.js, let’s import the react-native-qrcode-scanner library: Add this to the existing stack in Routes.js: For now it will look exactly like the home screen, but make sure to change the title from ' Home' to ' QRCodeScannerScreen'. Let’s create another file in the src folder and name it QRCodeScannerScreen.js. In the App.js, we’ll import the Routes.js file and use it like so:Īt this point your app will show the home Screen: We’ll then create the app container and export it as a default: For this app we don’t need to configure Header, Title or Navigation Bars. This component will import the react-navigation lib and create the stack that we'll use to navigate between screens. If you are reading the Welcome to React Native text, you did everything right until now, so let's begin to code.Ĭreate a new folder (let's call it “ src”) and inside the src folder create two new files: Routes.js and Home.js.įor the Routes.js, let's keep it simple. You should have an app that looks a little something like this: Or, if you are using an Android SDK: react-native run-android Now run the application: react-native run-ios Then: react-native link react-native-gesture-handler We’ll link these with the native platform, so use the following command: react-native link react-native-permissionsįinally, we’ll need to navigate between screens, so install the react-navigation library: npm install react-navigation -saveĪnd: npm install react-native-gesture-handler -save Then insert the line below in ‘ android/app/adle’ inside the defaultConfig block: android Īfter this, make sure to add the required permissions. This should be found in ‘ qrCodeApp/android/app/src/main/AndroidManifest.xml’. Add the code below: NSCameraUsageDescription Your message to user when the camera is accessed for the first timeįor Android 7 and higher you'll need to add the “ Vibration” permission to the AndroidManifest.xml. Then link the library: react-native link react-native-qrcode-scannerįor iOS you need to add the “ Privacy - Camera Usage Description” key to the ist file, this can be found in ‘ qrCodeApp/ios/qrCodeApp/ist’. react-native-camera is required by the react-native-qrcode-scanner, and this is our next installation: npm install react-native-qrcode-scanner -save These commands should be enough to set up the react-native-camera. Then link the library with the native platform: react-native link react-native-camera Now, we’ll need to install the following libraries in order to build our app:įirst, install the react-native-camera library: npm install react-native-camera -save Let’s start a new RN application: react-native init qrCodeApp & cd qrCodeApp For this QR Code Reader tutorial, we’re assuming that you already know the basics of ReactNative, and you’ll need to have a development environment running: A powerful framework that allows you to build native mobile apps with JavaScript, ReactNative uses the same design as React and helps you to compose a rich mobile UI by using declarative components.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |