{"id":25932665,"url":"https://github.com/socketmobile/react-native-capture","last_synced_at":"2026-03-05T00:10:29.789Z","repository":{"id":38015296,"uuid":"364382202","full_name":"SocketMobile/react-native-capture","owner":"SocketMobile","description":"React Native module for Capture JS SDK support on iOS and Android","archived":false,"fork":false,"pushed_at":"2024-01-25T19:07:04.000Z","size":379,"stargazers_count":4,"open_issues_count":2,"forks_count":4,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-04-26T17:21:18.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SocketMobile.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2021-05-04T20:47:59.000Z","updated_at":"2023-11-10T19:07:53.000Z","dependencies_parsed_at":"2024-10-24T23:59:52.281Z","dependency_job_id":"3fcc3188-1378-4628-836e-486b41d8adbb","html_url":"https://github.com/SocketMobile/react-native-capture","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SocketMobile%2Freact-native-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SocketMobile%2Freact-native-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SocketMobile%2Freact-native-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SocketMobile%2Freact-native-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SocketMobile","download_url":"https://codeload.github.com/SocketMobile/react-native-capture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241763763,"owners_count":20016161,"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":[],"created_at":"2025-03-04T00:38:44.276Z","updated_at":"2026-03-05T00:10:29.724Z","avatar_url":"https://github.com/SocketMobile.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Natice CaptureSDK - Version 1.5.124\n\nThis react native module allows a React Native application to use and control Socket Mobile wireless barcode scanners, NFC Reader/Writer, and Camera to capture and deliver data capture to such application.\n\n## Devices compatibility and CaptureSDK versions\n\n|                    Devices                     | \u003c= 1.2 | 1.3 | 1.4 | 1.5 |\n| :--------------------------------------------: | :----: | :-: | :-: | :-: |\n|               **SocketCam C860**               |   ❌   | ❌  | ✅  | ✅  |\n|               **SocketCam C820**               |   ❌   | ❌  | ✅  | ✅  |\n|               **S720/D720/S820**               |   ❌   | ✅  | ✅  | ✅  |\n| **D600, S550, and all other barcode scanners** |   ✅   | ✅  | ✅  | ✅  |\n|                    **S370**                    |   ❌   | ❌  | ✅  | ✅  |\n|                    **S320**                    |   ❌   | ❌  | ❌  | ✅  |\n\n## Installation\n\nWe recommend using [Yarn](https://yarnpkg.com) to install this module to your app environment:\n\n```sh\nyarn add react-native-capture\n```\n\n## How to Use SocketCam\n\nIn the latest version, the developer no longer needs to invoke the `startCaptureExtension`, `getSocketCamStatus`, or even construct their own `setProperty` method for setting the SocketCam trigger. They also no longer need to implement `NativeModules` or `DeviceEventEmitter` as this is all taken care of in the new React Native component provided by the React Native CaptureSDK: `SocketCamViewController`. It can be imported from `react-native-capture` and used where you want to employ SocketCam, either C820 or C860.\n\n### SocketCamViewContainer\n\nOnce you import this component, it can be used in your app like so.\n\n```xml\n  \u003cSocketCamViewContainer\n    openSocketCamView={openSocketCamView}\n    handleSetSocketCamEnabled={handleSetSocketCamEnabled}\n    clientOrDeviceHandle={clientOrDeviceHandle}\n    triggerType={triggerType}\n    socketCamCapture={socketCamCapture}\n    socketCamDevice={socketCamDevice}\n    myLogger={myLogger}\n    handleSetStatus={handleSetStatus}\n    handleSetSocketCamExtensionStatus={handleSetSocketCamExtensionStatus}\n    socketCamCustomModalStyle={{\n      presentationStyle: 'overFullScreen',\n      animationType: 'fade',\n      transparent: true,\n    }}\n    socketCamCustomStyle={SocketCamViewStyles.container}\n    androidSocketCamCustomView={\n      \u003cRNSocketCamCustomViewManager\n        isScanContinuous={triggerType === Trigger.ContinuousScan}\n      /\u003e\n    }\n  /\u003e\n```\n\nSocketCam in your React Native app, you can check out the docs [here](https://docs.socketmobile.com/react-native-capture/en/latest/socketCam.html 'docs.socketmobile.com'). For more information specifically about `SocketCamViewContainer`, you read more [here](https://docs.socketmobile.com/react-native-capture/en/latest/socketCam.html#socketcamviewcontainer.html 'docs.socketmobile.com').\n\n## Custom View finder for SocketCam\n\nThe latest version of the React Native CaptureSDK also offers support for customizing the SocketCam view finder in your app. To do this on iOS, you can provide either custom styles for the `socketCamCustomStyle` prop or modal styles for the `socketCamCustomModalStyle` prop.\n\nOn Android, you can customize SocketCam by passing a React Native component to the `androidSocketCamCustomView` prop. You will also need to provide your own layout, native view manager, and custom activity.\n\nFor more on using custom views for SocketCam, you can read the docs [here](https://docs.socketmobile.com/react-native-capture/en/latest/socketCamCustom.html 'docs.socketmobile.com').\n\n## Referencing Socket Mobile's Android CaptureSDK\n\nIn version `\u003e1.5`, we are removing the `android/libs` folder and it's contents. This is because we are now referencing the Socket Mobile Android CaptureSDK via the release repo. The developer will need to add two things. First, in their `build.gradle` file, add the below code, in the `repositories` section.\n\n```groovy\n  maven {\n    url \"https://bin.socketmobile.com/repo/releases\"\n  }\n```\n\nNext, in their `app/gradle.build` file, they will need to add the below code.\n\n```groovy\n  packagingOptions {\n    pickFirst '/lib/arm64-v8a/libc++_shared.so'\n    pickFirst '/lib/armeabi-v7a/libc++_shared.so'\n  }\n```\n\n## Enable Start Capture Service on Android\n\nIn order enable Start Capture Service on Android (so that the developer does't need to actively run/open Companion on the same device), the developer will need to add some security configurations to allow this service to run in the background of their app.\n\nFirst, in `your-app/android/app/src/main/res`, there needs to be an `xml` directory if there isn't one already. In that directory, you will need to add the file `network_security_config.xml`. That file should contain the below information.\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cnetwork-security-config\u003e\n    \u003cbase-config cleartextTrafficPermitted=\"false\" /\u003e\n    \u003cdomain-config cleartextTrafficPermitted=\"true\"\u003e\n        \u003cdomain includeSubdomains=\"false\"\u003elocalhost\u003c/domain\u003e\n        \u003cdomain includeSubdomains=\"false\"\u003e127.0.0.1\u003c/domain\u003e\n    \u003c/domain-config\u003e\n\u003c/network-security-config\u003e\n```\n\nThen, in their app's `AndroidManifest.xml` file, the developer will need to add the below property into the `\u003capplication\u003e` tag.\n\n```xml\nandroid:networkSecurityConfig=\"@xml/network_security_config\"\n```\n\nFinally, add the below line into just before the `AndroidManifest.xml` file's closing `\u003c/manifest\u003e` tag.\n\n```xml\n\u003cqueries\u003e\n  \u003cpackage android:name=\"com.socketmobile.companion\"/\u003e\n\u003c/queries\u003e\n```\n\nFor more on the network security configuration for Android, please check out the cleartext section in [the Android docs](https://docs.socketmobile.com/capture/java/en/latest/android/getting-started.html#enable-cleartext-traffic).\n\n## Enabling SocketCam on iOS\n\nIn your `Info.plist`, you need to add the key to allow access to the camera. Add the below code to the bottom of your `dict` tag.\n\n```xml\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eNeed to enable camera access for SocketCam products such as C820\u003c/string\u003e\n```\n\nYou also need to add the following key to your `Info.plist`: `LSApplicationQueriesSchemes` (Queried URL Schemes) with a new item: `sktcompanion` (in lower case). See below.\n\n```xml\n    \u003ckey\u003eLSApplicationQueriesSchemes\u003c/key\u003e\n    \u003carray\u003e\n      \u003cstring\u003esktcompanion\u003c/string\u003e\n    \u003c/array\u003e\n```\n\n## Using useRef React Hook\n\nYou might encounter memory or state reference issues in your React Native app when trying to access them within the `onCaptureEvent` callback that is passed to the `CaptureRn` instance. This is likely because `onCaptureEvent` is not actually invoked by the component itself but rather as a side effect/listener that is operating in the context of the `CaptureRn` instance. This leads to complex data structures in state, such as arrays and objects, not being reliably accessible.\n\nA workaround to this is to use the `useRef` hook. This will allow you to store various state values in an actual reference value related to the component. This reference can then be accessed in the context that `onCaptureEvent` is operating in. You can add by including it in the general import at the top of your component.\n\n```javascript\nimport React, { useState, useEffect, useRef } from 'react';\n```\n\nThen you can use it after you declare your React Hook state values.\n\n```javascript\nconst App = () =\u003e {\n  const [devices, setDevices] = useState([]);\n\n  const stateRef = useRef();\n\n  stateRef.current = devices;\n\n  const onCaptureEvent = (e, handle) =\u003e {\n    if (!e) {\n      return;\n    }\n\n    myLogger.log(`onCaptureEvent from ${handle}: `, e);\n    let devs = stateRef.current.devices; // HERE is we can check a reliable and up to date list of devices.\n    switch (e.id) {\n      ...\n    }\n\n    ...\n\n};\n```\n\n## Documentation\n\nMore documentation available at [Socket online documentation](https://docs.socketmobile.com/react-native-capture/en/latest/ 'docs.socketmobile.com').\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketmobile%2Freact-native-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsocketmobile%2Freact-native-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketmobile%2Freact-native-capture/lists"}