Berify-Scan

The react native package is scan component.

What you'll need

• Node.js version 18.0 or above :

  • When installing Node.js, you are recommended to check all checkboxes related to dependencies.

• [React Native] version 0.73.6

Install and Configure

Install

yarn add @bytexbyte/berify-scan lottie-react-native react-native-nfc-manager react-native-svg

Configure

metro.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

const { resolver: { sourceExts, assetExts } } = getDefaultConfig();

// ...
const config = {
  transformer: {
    getTransformOptions: () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true
      }
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg']
  }
};
// ...

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2021"],                        /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "noEmit": true,                           /* Do not emit outputs. */
    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    "strict": true,                           /* Enable all strict type-checking options. */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "skipLibCheck": false,                    /* Skip type checking of declaration files. */
    "resolveJsonModule": true,                 /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */
    "baseUrl": ".",
    "paths":{
      "*":["src/*"],
    }
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

Android

In ..\android\app\src\main\AndroidManifest.xml

add <uses-permission android:name="android.permission.VIBRATE"/>

iOS

react-native-nfc-manager setup instructions at this URL

Example

App.tsx

import { Scan } from '@bytexbyte/berify-scan';
import React, { useState } from 'react';
import { Text } from 'react-native';
import { TagEvent } from 'react-native-nfc-manager';


export default function App() {

  const [tag, setTag] = useState<TagEvent>();

  return (<>
    <Scan tag={tag} setTag={setTag} />
    <Text>
      {JSON.stringify(tag)}
    </Text>
  </>);
}