Skip to main content

API 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-app-open-api react-native-device-info 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.

Example​

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

type TailType = 'off' | 'on';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
  secretKey: 'App-Berify-Secret', // Do not modify
  secret: '' // This is the secret key provided by Berify
});

export default function App() {

  const [tag, setTag] = useState<TagEvent>();
  const [createScanResult, setCreateScanResult] = useState<Awaited<ReturnType<typeof berifyAppApi.scan.create>>>();
  const deviceId = DeviceInfo.getUniqueIdSync().toLowerCase();

  const createScan = async (data: {
    uid: string;
    tagTokenId: string;
    deviceId: string;
    longitude: number | null;
    latitude: number | null;
    tail: TailType;
  }) => {
    const createResult = await berifyAppApi.scan.create({ ...data, isAppClip: false, deviceOsType: Platform.OS });
    setCreateScanResult(createResult);
  };

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

      createScan({
        uid, tagTokenId: tokenId, deviceId,
        longitude: null,
        latitude: null,
        tail
      })
    }
  }, [tag]);

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Scan tag={tag} setTag={setTag} />
            <View>
              <Text>{JSON.stringify(createScanResult, null, 2)}</Text>
            </View>
          </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,
  }
});