npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-capture

v1.5.111

Published

Socket Mobile CaptureSDK for React Native

Downloads

284

Readme

React Natice CaptureSDK - Version 1.5.111

This 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.

Devices compatibility and CaptureSDK versions

| Devices | <= 1.2 | 1.3 | 1.4 | 1.5 | | :--------------------------------------------: | :----: | :-: | :-: | :-: | | SocketCam C860 | ❌ | ❌ | ✅ | ✅ | | SocketCam C820 | ❌ | ❌ | ✅ | ✅ | | S720/D720/S820 | ❌ | ✅ | ✅ | ✅ | | D600, S550, and all other barcode scanners | ✅ | ✅ | ✅ | ✅ | | S370 | ❌ | ❌ | ✅ | ✅ | | S320 | ❌ | ❌ | ❌ | ✅ |

Installation

We recommend using Yarn to install this module to your app environment:

yarn add react-native-capture

How to Use SocketCam

In 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.

SocketCamViewContainer

Once you import this component, it can be used in your app like so.

  <SocketCamViewContainer
    openSocketCamView={openSocketCamView}
    handleSetSocketCamEnabled={handleSetSocketCamEnabled}
    clientOrDeviceHandle={clientOrDeviceHandle}
    triggerType={triggerType}
    socketCamCapture={socketCamCapture}
    socketCamDevice={socketCamDevice}
    myLogger={myLogger}
    handleSetStatus={handleSetStatus}
    handleSetSocketCamExtensionStatus={handleSetSocketCamExtensionStatus}
    socketCamCustomModalStyle={{
      presentationStyle: 'overFullScreen',
      animationType: 'fade',
      transparent: true,
    }}
    socketCamCustomStyle={SocketCamViewStyles.container}
    androidSocketCamCustomView={
      <RNSocketCamCustomViewManager
        isScanContinuous={triggerType === Trigger.ContinuousScan}
      />
    }
  />

SocketCam in your React Native app, you can check out the docs here. For more information specifically about SocketCamViewContainer, you read more here.

Custom View finder for SocketCam

The 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.

On 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.

For more on using custom views for SocketCam, you can read the docs here.

Referencing Socket Mobile's Android CaptureSDK

In version >1.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.

  maven {
    url "https://bin.socketmobile.com/repo/releases"
  }

Next, in their app/gradle.build file, they will need to add the below code.

  packagingOptions {
    pickFirst '/lib/arm64-v8a/libc++_shared.so'
    pickFirst '/lib/armeabi-v7a/libc++_shared.so'
  }

Enable Start Capture Service on Android

In 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.

First, 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.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="false" />
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">localhost</domain>
        <domain includeSubdomains="false">127.0.0.1</domain>
    </domain-config>
</network-security-config>

Then, in their app's AndroidManifest.xml file, the developer will need to add the below property into the <application> tag.

android:networkSecurityConfig="@xml/network_security_config"

Finally, add the below line into just before the AndroidManifest.xml file's closing </manifest> tag.

<queries>
  <package android:name="com.socketmobile.companion"/>
</queries>

For more on the network security configuration for Android, please check out the cleartext section in the Android docs.

Enabling SocketCam on iOS

In 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.

<key>NSCameraUsageDescription</key>
<string>Need to enable camera access for SocketCam products such as C820</string>

You 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.

    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>sktcompanion</string>
    </array>

Using useRef React Hook

You 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.

A 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.

import React, { useState, useEffect, useRef } from 'react';

Then you can use it after you declare your React Hook state values.

const App = () => {
  const [devices, setDevices] = useState([]);

  const stateRef = useRef();

  stateRef.current = devices;

  const onCaptureEvent = (e, handle) => {
    if (!e) {
      return;
    }

    myLogger.log(`onCaptureEvent from ${handle}: `, e);
    let devs = stateRef.current.devices; // HERE is we can check a reliable and up to date list of devices.
    switch (e.id) {
      ...
    }

    ...

};

Documentation

More documentation available at Socket online documentation.