Skip to main content

UI Example Implementation

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.

Install and Configure​

Install​


npm i @bytexbyte/berify-scan lottie-react-native react-native-nfc-manager react-native-svg react-native-svg-transformer react-native-safe-area-context

iOS​

This library use native-modules, so you will need to do pod install for iOS:

cd ios && pod install && cd ..

Android​

It should be properly auto-linked, so you don't need to do anything.

Configure​

metro.config.js​

...
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']
  }
  ...
};

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​

import { Scan, DecodingNormalTag } from '@bytexbyte/berify-scan';
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { TagEvent } from 'react-native-nfc-manager';
import { SafeAreaProvider } from 'react-native-safe-area-context';


export default function App() {

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

  useEffect(() => {
    if (tag) {
      const { uid, tokenId, tail } = DecodingNormalTag(tag);
      const result = { uid, tokenId, tail };
      setScanResult(result)
    }
  }, [tag]);

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Scan tag={tag} setTag={setTag} />
            <Text>{JSON.stringify(scanResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider >
  );
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});