{"id":20920146,"url":"https://github.com/pushpender-singh-ap/react-native-scanner","last_synced_at":"2025-04-04T22:06:46.433Z","repository":{"id":107014817,"uuid":"609541362","full_name":"pushpender-singh-ap/react-native-scanner","owner":"pushpender-singh-ap","description":"A QR code \u0026 Barcode Scanner for React Native Projects. It supports React Native's new Fabric Native architecture and was created in Kotlin and Objective-C.","archived":false,"fork":false,"pushed_at":"2025-02-02T14:06:44.000Z","size":1265,"stargazers_count":78,"open_issues_count":0,"forks_count":12,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-28T21:05:45.956Z","etag":null,"topics":["barcode","barcode-scanner","qrcode","qrcode-scanner","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@pushpendersingh/react-native-scanner","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pushpender-singh-ap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-04T13:46:43.000Z","updated_at":"2025-03-12T21:19:25.000Z","dependencies_parsed_at":"2024-05-17T14:44:51.679Z","dependency_job_id":"ab541ec2-509e-4751-bfcd-e18d2d4a310a","html_url":"https://github.com/pushpender-singh-ap/react-native-scanner","commit_stats":{"total_commits":12,"total_committers":3,"mean_commits":4.0,"dds":"0.16666666666666663","last_synced_commit":"9ded43836dd26579e084cd5579358bd23327babe"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpender-singh-ap%2Freact-native-scanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpender-singh-ap%2Freact-native-scanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpender-singh-ap%2Freact-native-scanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpender-singh-ap%2Freact-native-scanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pushpender-singh-ap","download_url":"https://codeload.github.com/pushpender-singh-ap/react-native-scanner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode","barcode-scanner","qrcode","qrcode-scanner","react-native"],"created_at":"2024-11-18T18:08:55.812Z","updated_at":"2025-04-04T22:06:46.414Z","avatar_url":"https://github.com/pushpender-singh-ap.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @pushpendersingh/react-native-scanner\n\nA QR code \u0026 Barcode Scanner for React Native Projects.\n\nFor 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.\n\nWith 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.\n\nIf you want to provide your React Native app the ability to read barcodes and QR codes, you should definitely give this package some thought.\n\nThe `@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 \u0026 barcodes in low light conditions.\n\n## Getting started\n\n### Requirements\n\n#### IOS\n\nOpen your project's `Info.plist` and add the following lines inside the outermost `\u003cdict\u003e` tag:\n\n```xml\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eYour message to user when the camera is accessed for the first time\u003c/string\u003e\n```\n\nOpen your project's `Podfile` and add enable the new architecture:\n\n```\n:fabric_enabled =\u003e true,\n```\n\nRun below command to enable the new architecture in IOS folder\n\n```\nbundle install \u0026\u0026 RCT_NEW_ARCH_ENABLED=1 bundle exec pod install\n```\n\n### Android\n\nOpen your project's `AndroidManifest.xml` and add the following lines inside the `\u003cmanifest\u003e` tag:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\n\u003cuses-feature android:name=\"android.hardware.camera.any\" /\u003e\n```\n\nOpen your project's `gradle.properties` and add enable the new architecture:\n\n```\nnewArchEnabled=true\n```\n\n### To install and start using @pushpendersingh/react-native-scanner\n\n```sh\nnpm install @pushpendersingh/react-native-scanner\n```\n\n### Supported Formats\n\n| 1D product            | 1D industrial | 2D             |\n|:----------------------|:--------------|:---------------|\n| UPC-A                 | Code 39       | QR Code        |\n| UPC-E                 | Code 93       | Data Matrix    |\n| EAN-8                 | Code 128      | Aztec          |\n| EAN-13                | Codabar       | PDF 417        |\n|                       | ITF           |                |\n\n## Usage\n\nTo use @pushpendersingh/react-native-scanner, `import` the `@pushpendersingh/react-native-scanner` module and use the `\u003cReactNativeScannerView /\u003e` tag. More usage examples can be seen under the `examples/` folder.\n\n\u003cdetails\u003e\n  \u003csummary\u003eBasic usage\u003c/summary\u003e\n\nHere is an example of basic usage:\n\n```js\nimport React, {useEffect, useRef, useState} from 'react';\nimport {\n  Alert,\n  Platform,\n  Text,\n  SafeAreaView,\n  Button,\n  View,\n  StyleSheet,\n} from 'react-native';\n\nimport {\n  request,\n  PERMISSIONS,\n  openSettings,\n  RESULTS,\n} from 'react-native-permissions'; // For camera permission\nimport {\n  Commands,\n  ReactNativeScannerView,\n} from '@pushpendersingh/react-native-scanner';\n\nexport default function App() {\n  const scannerRef = useRef(null);\n  const [isCameraPermissionGranted, setIsCameraPermissionGranted] =\n    useState(false);\n  const [isActive, setIsActive] = useState(true);\n  const [scannedData, setScannedData] = useState(null);\n\n  useEffect(() =\u003e {\n    checkCameraPermission();\n  }, []);\n\n  const handleBarcodeScanned = event =\u003e {\n    const {data, bounds, type} = event?.nativeEvent;\n    setScannedData({data, bounds, type});\n    console.log('Barcode / QR Code scanned:', data, bounds, type);\n  };\n\n  const enableFlashlight = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.enableFlashlight(scannerRef.current);\n    }\n  };\n\n  const disableFlashlight = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.disableFlashlight(scannerRef.current);\n    }\n  };\n\n  // Pause the camera after barcode / QR code is scanned\n  const stopScanning = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.stopScanning(scannerRef?.current);\n      console.log('Scanning paused');\n    }\n  };\n\n  // Resume the camera after barcode / QR code is scanned\n  const resumeScanning = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.resumeScanning(scannerRef?.current);\n      console.log('Scanning resumed');\n    }\n  };\n\n  const releaseCamera = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.releaseCamera(scannerRef?.current);\n    }\n  }\n\n  const startScanning = () =\u003e {\n    if (scannerRef?.current) {\n      Commands.startCamera(scannerRef?.current);\n    }\n  }\n\n  const checkCameraPermission = async () =\u003e {\n    request(\n      Platform.OS === 'ios'\n        ? PERMISSIONS.IOS.CAMERA\n        : PERMISSIONS.ANDROID.CAMERA,\n    ).then(async (result: any) =\u003e {\n      switch (result) {\n        case RESULTS.UNAVAILABLE:\n          // console.log('This feature is not available (on this device / in this context)');\n          break;\n        case RESULTS.DENIED:\n          Alert.alert(\n            'Permission Denied',\n            'You need to grant camera permission first',\n          );\n          openSettings();\n          break;\n        case RESULTS.GRANTED:\n          setIsCameraPermissionGranted(true);\n          break;\n        case RESULTS.BLOCKED:\n          Alert.alert(\n            'Permission Blocked',\n            'You need to grant camera permission first',\n          );\n          openSettings();\n          break;\n      }\n    });\n  };\n\n  if (isCameraPermissionGranted) {\n    return (\n      \u003cSafeAreaView style={styles.container}\u003e\n        {isActive \u0026\u0026 (\n          \u003cReactNativeScannerView\n            ref={scannerRef}\n            style={styles.scanner}\n            onQrScanned={handleBarcodeScanned}\n            pauseAfterCapture={true} // Pause the scanner after barcode / QR code is scanned\n            isActive={isActive} // Start / stop the scanner using this prop\n            showBox={true} // Show the box around the barcode / QR code\n          /\u003e\n        )}\n\n        \u003cView style={styles.controls}\u003e\n          \u003cButton\n            title=\"Stop Scanning\"\n            onPress={() =\u003e {\n              stopScanning();\n              setIsActive(false);\n            }}\n          /\u003e\n          \u003cButton\n            title=\"Resume Scanning\"\n            onPress={() =\u003e {\n              resumeScanning();\n              setIsActive(true);\n            }}\n          /\u003e\n          \u003cButton\n            title=\"Flash Off\"\n            onPress={() =\u003e {\n              disableFlashlight();\n            }}\n          /\u003e\n          \u003cButton\n            title=\"Flash On\"\n            onPress={() =\u003e {\n              enableFlashlight();\n            }}\n          /\u003e\n          \u003cButton\n            title=\"Release Camera\"\n            onPress={() =\u003e {\n              releaseCamera();\n            }}\n          /\u003e\n          \u003cButton\n            title=\"Start Camera\"\n            onPress={() =\u003e {\n              startScanning();\n            }}\n          /\u003e\n        \u003c/View\u003e\n\n        {scannedData \u0026\u0026 (\n          \u003cView style={styles.result}\u003e\n            \u003cText style={styles.resultText}\u003e\n              Scanned Data: {scannedData?.data}\n            \u003c/Text\u003e\n            \u003cText style={styles.resultText}\u003eType: {scannedData?.type}\u003c/Text\u003e\n          \u003c/View\u003e\n        )}\n      \u003c/SafeAreaView\u003e\n    );\n  } else {\n    return (\n      \u003cText style={styles.TextStyle}\u003e\n        You need to grant camera permission first\n      \u003c/Text\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  box: {\n    position: 'absolute',\n    borderWidth: 2,\n    borderColor: 'green',\n    zIndex: 10,\n  },\n  scanner: {\n    flex: 1,\n  },\n  controls: {\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    marginVertical: 10,\n    flexWrap: 'wrap',\n    gap: 8,\n    marginHorizontal: 10,\n  },\n  result: {\n    marginTop: 16,\n    padding: 16,\n    backgroundColor: '#f9f9f9',\n    borderRadius: 8,\n  },\n  resultText: {\n    fontSize: 16,\n    marginVertical: 4,\n  },\n  TextStyle: {\n    fontSize: 30,\n    color: 'red',\n  },\n});\n```\n\n\u003c/details\u003e\n\n## Props\n\n#### `onQrScanned` (required)\n\npropType: `function.isRequired`\ndefault: `(e) =\u003e (console.log('QR code scanned!', e))`\n\nIn the event that a QR code or barcode is detected in the camera's view, this specified method will be called.\n\n#### `pauseAfterCapture` (required)\npropType: `boolean`\ndefault: `false`\n\nIf set to `true`, the scanner will pause after capturing a QR code or barcode.\n\n#### `showBox` (optional)\npropType: `boolean`\ndefault: `false`\n\nIf set to `true`, a green box will be displayed around the QR code or barcode that is detected.\n\n#### `isActive` (required)\npropType: `boolean`\ndefault: `true`\n\nIf set to `false`, the scanner will be disabled. This can be useful when you want to pause the scanner.\n\n## Native Commands\n\nThe `@pushpendersingh/react-native-scanner` package also includes a few native commands that can be used to control the camera and flashlight.\n\n### Commands\n\n#### `enableFlashlight`\n\nThis command is used to turn on the flashlight.\n```js\nif(cameraRef.current) {\n  Commands.enableFlashlight(cameraRef.current);\n}\n```\n\n#### `disableFlashlight`\n\nThis command is used to turn off the flashlight.\n```js\nif(cameraRef.current) {\n  Commands.disableFlashlight(cameraRef.current);\n}\n```\n\n#### `releaseCamera`\n\nThis command is used to release the camera.\n\n```js\nif(cameraRef?.current) {\n  Commands?.releaseCamera(cameraRef?.current);\n}\n```\n\n#### `startCamera`\n\nThis command is used to start the camera.\n\n```js\nif(cameraRef?.current) {\n  Commands.startCamera(cameraRef?.current);\n}\n```\n\n#### `stopScanning`\n\nThis command is used to stop the scanning.\n\n```js\nif(cameraRef.current) {\n  Commands.stopScanning(cameraRef.current);\n}\n```\n\n### `resumeScanning`\n\nThis command is used to resume the scanning.\n\n```js\nif(cameraRef.current) {\n  Commands.resumeScanning(cameraRef.current);\n}\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushpender-singh-ap%2Freact-native-scanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpushpender-singh-ap%2Freact-native-scanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushpender-singh-ap%2Freact-native-scanner/lists"}