Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pushpender-singh-ap/react-native-scanner
A QR code & Barcode Scanner for React Native Projects. It supports React Native's new Fabric Native architecture and was created in Kotlin and Objective-C.
https://github.com/pushpender-singh-ap/react-native-scanner
barcode barcode-scanner qrcode qrcode-scanner react-native
Last synced: 3 days ago
JSON representation
A QR code & Barcode Scanner for React Native Projects. It supports React Native's new Fabric Native architecture and was created in Kotlin and Objective-C.
- Host: GitHub
- URL: https://github.com/pushpender-singh-ap/react-native-scanner
- Owner: pushpender-singh-ap
- License: mit
- Created: 2023-03-04T13:46:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-02T13:45:04.000Z (23 days ago)
- Last Synced: 2024-12-15T00:51:00.468Z (10 days ago)
- Topics: barcode, barcode-scanner, qrcode, qrcode-scanner, react-native
- Language: Kotlin
- Homepage: https://www.npmjs.com/package/@pushpendersingh/react-native-scanner
- Size: 1.17 MB
- Stars: 61
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @pushpendersingh/react-native-scanner
A QR code & Barcode Scanner for React Native Projects.
For React Native developers that need to scan barcodes and QR codes in their apps, this package is a useful resource. It supports React Native's new Fabric Native architecture and was created in Kotlin and Objective-C.
With this package, users can quickly and easily scan barcodes and QR codes with their device's camera. Using this package, several types of codes can be scanned, and it is simple to use.
If you want to provide your React Native app the ability to read barcodes and QR codes, you should definitely give this package some thought.
The `@pushpendersingh/react-native-scanner` package also includes a flashlight feature that can be turned on and off. This can be useful when scanning QR codes & barcodes in low light conditions.
## Getting started
### Requirements
#### IOS
Open your project's `Info.plist` and add the following lines inside the outermost `` tag:
```xml
NSCameraUsageDescription
Your message to user when the camera is accessed for the first time
```
Open your project's `Podfile` and add enable the new architecture:
```
:fabric_enabled => true,
```
Run below command to enable the new architecture in IOS folder
```
bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```
### Android
Open your project's `AndroidManifest.xml` and add the following lines inside the `` tag:
```xml
```
Open your project's `gradle.properties` and add enable the new architecture:
```
newArchEnabled=true
```
### To install and start using @pushpendersingh/react-native-scanner
```sh
npm install @pushpendersingh/react-native-scanner
```
### Supported Formats
| 1D product | 1D industrial | 2D |
|:----------------------|:--------------|:---------------|
| UPC-A | Code 39 | QR Code |
| UPC-E | Code 93 | Data Matrix |
| EAN-8 | Code 128 | Aztec |
| EAN-13 | Codabar | PDF 417 |
| | ITF | |
## Usage
To use @pushpendersingh/react-native-scanner, `import` the `@pushpendersingh/react-native-scanner` module and use the `` tag. More usage examples can be seen under the `examples/` folder.
Basic usage
Here is an example of basic usage:
```js
import React, {useEffect, useRef, useState} from 'react';
import {
Alert,
Platform,
Text,
SafeAreaView,
Button,
View,
StyleSheet,
} from 'react-native';
import {
request,
PERMISSIONS,
openSettings,
RESULTS,
} from 'react-native-permissions'; // For camera permission
import {
Commands,
ReactNativeScannerView,
} from '@pushpendersingh/react-native-scanner';
export default function App() {
const scannerRef = useRef(null);
const [isCameraPermissionGranted, setIsCameraPermissionGranted] =
useState(false);
const [isActive, setIsActive] = useState(true);
const [scannedData, setScannedData] = useState(null);
useEffect(() => {
checkCameraPermission();
}, []);
const handleBarcodeScanned = event => {
const {data, bounds, type} = event?.nativeEvent;
setScannedData({data, bounds, type});
console.log('Barcode scanned:', data, bounds, type);
};
// Pause the camera after barcode / QR code is scanned
const pauseScanning = () => {
if (scannerRef?.current) {
Commands.pauseScanning(scannerRef?.current);
console.log('Camera preview paused');
}
};
// Resume the camera after barcode / QR code is scanned
const resumeScanning = () => {
if (scannerRef?.current) {
Commands.resumeScanning(scannerRef?.current);
console.log('Camera preview resumed');
}
};
const checkCameraPermission = async () => {
request(
Platform.OS === 'ios'
? PERMISSIONS.IOS.CAMERA
: PERMISSIONS.ANDROID.CAMERA,
).then(async (result: any) => {
switch (result) {
case RESULTS.UNAVAILABLE:
// console.log('This feature is not available (on this device / in this context)');
break;
case RESULTS.DENIED:
Alert.alert(
'Permission Denied',
'You need to grant camera permission first',
);
openSettings();
break;
case RESULTS.GRANTED:
setIsCameraPermissionGranted(true);
break;
case RESULTS.BLOCKED:
Alert.alert(
'Permission Blocked',
'You need to grant camera permission first',
);
openSettings();
break;
}
});
};
if (isCameraPermissionGranted) {
return (
{isActive && (
)}
setIsActive(false)} />
setIsActive(true)} />
{scannedData && (
Scanned Data: {scannedData?.data}
Type: {scannedData?.type}
Bounds: {JSON.stringify(scannedData?.bounds)}
)}
);
} else {
return (
You need to grant camera permission first
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: '#fff',
},
scanner: {
flex: 1,
},
controls: {
flexDirection: 'row',
justifyContent: 'space-around',
marginVertical: 10,
flexWrap: 'wrap',
gap: 8,
marginHorizontal: 10,
},
result: {
marginTop: 16,
padding: 16,
backgroundColor: '#f9f9f9',
borderRadius: 8,
},
resultText: {
fontSize: 16,
marginVertical: 4,
},
});
```
## Flashlight Feature
Flashlight Feature
To use the flashlight feature, add the following code to your project:
```jsx
import React, {useEffect, useRef, useState} from 'react';
import {
Alert,
Platform,
useWindowDimensions,
Text,
SafeAreaView,
TouchableOpacity,
} from 'react-native';
import {
request,
PERMISSIONS,
openSettings,
RESULTS,
} from 'react-native-permissions';
import {
ReactNativeScannerView,
Commands,
} from '@pushpendersingh/react-native-scanner';
export default function App() {
const {height, width} = useWindowDimensions();
const [isCameraPermissionGranted, setIsCameraPermissionGranted] =
useState(false);
const cameraRef = useRef(null);
useEffect(() => {
checkCameraPermission();
return () => {
if(cameraRef.current) {
Commands.releaseCamera(cameraRef.current);
}
};
}, []);
const enableFlashlight = () => {
Commands.enableFlashlight(cameraRef.current);
};
const disableFlashlight = () => {
Commands.disableFlashlight(cameraRef.current);
};
const checkCameraPermission = async () => {
request(
Platform.OS === 'ios'
? PERMISSIONS.IOS.CAMERA
: PERMISSIONS.ANDROID.CAMERA,
).then(async (result: any) => {
switch (result) {
case RESULTS.UNAVAILABLE:
break;
case RESULTS.DENIED:
Alert.alert(
'Permission Denied',
'You need to grant camera permission first',
);
openSettings();
break;
case RESULTS.GRANTED:
setIsCameraPermissionGranted(true);
break;
case RESULTS.BLOCKED:
Alert.alert(
'Permission Blocked',
'You need to grant camera permission first',
);
openSettings();
break;
}
});
};
if (isCameraPermissionGranted) {
return (
(cameraRef.current = ref)}
style={{height, width}}
onQrScanned={(value: any) => {
console.log(value.nativeEvent);
}}
/>
Turn ON
Turn OFF
);
} else {
return (
You need to grant camera permission first
);
}
}
```
## Props
#### `onQrScanned` (required)
propType: `function.isRequired`
default: `(e) => (console.log('QR code scanned!', e))`
In the event that a QR code or barcode is detected in the camera's view, this specified method will be called.
#### `pauseAfterCapture` (required)
propType: `boolean`
default: `false`
If set to `true`, the scanner will pause after capturing a QR code or barcode.
#### `isActive` (required)
propType: `boolean`
default: `true`
If set to `false`, the scanner will be disabled. This can be useful when you want to pause the scanner.
## Native Commands
The `@pushpendersingh/react-native-scanner` package also includes a few native commands that can be used to control the camera and flashlight.
### Commands
#### `enableFlashlight`
This command is used to turn on the flashlight.
```js
if(cameraRef.current) {
Commands.enableFlashlight(cameraRef.current);
}
```
#### `disableFlashlight`
This command is used to turn off the flashlight.
```js
if(cameraRef.current) {
Commands.disableFlashlight(cameraRef.current);
}
```
#### `releaseCamera`
This command is used to release the camera.
```js
if(cameraRef.current) {
Commands.releaseCamera(cameraRef.current);
}
```
### `pauseScanning`
This command is used to pause the scanning.
```js
if(cameraRef.current) {
Commands.pauseScanning(cameraRef.current);
}
```
### `resumeScanning`
This command is used to resume the scanning.
```js
if(cameraRef.current) {
Commands.resumeScanning(cameraRef.current);
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT