QR code reader written in React Native.
- Create a new React Native project:
npx react-native@latest init QRCodeScanner
- Install CocoaPods:
When prompted, choose "yes" to install CocoaPods if you run your project in Xcode directly.
Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly => yes
- Locate Project Folder;
cd QRCodeScanner
- Install React Native Camera Kit:
npm i react-native-camera-kit
- Set Permissions for iOS/Android:
Add the following uses-permission to your AndroidManifest.xml
(usually found at: android/src/main/
)
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Add the following usage descriptions to your Info.plist
(usually found at: ios/PROJECT_NAME/
)
<key>NSCameraUsageDescription</key>
<string>For taking photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>For saving photos</string>
- Install Pods (For IOS)
npx pod-install
- Start the Metro server:
npm start
- Run on iOS/Android simulator:
npm run ios # for iOS
# OR
npm run android # for Android
- Change App.tsx codes
import {Text, SafeAreaView} from 'react-native';
import React from 'react';
export default function App() {
return (
<SafeAreaView>
<Text>App</Text>
</SafeAreaView>
);
}
- SS
- Create src folder & BarcodeExample.tsx & src/images and then write codes & add images to images folder
- Change App.tsx codes
- SS
- On real devices => xed ios
- set signing a Team (Project Name/Signing & Capabilities/Signing)
- run
- SS