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-async-storage/async-storage 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

Check biometrics status

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const storageKey = 'biometrics';
  type StorageData = { payload: string, publicKey: string, email: string | null | undefined };

  const [userId, setUserId] = useState('');
  const [checkBiometricsStatusResult, setCheckBiometricsStatusResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.checkBiometricsStatus>>>();

  const getBiometricsData = async (): Promise<StorageData | null> => {
    const storageDataStr = await AsyncStorage.getItem(storageKey);
    if (!storageDataStr) return null;
    try {
      return JSON.parse(storageDataStr);
    } catch (error) {
      return null;
    }
  };

  const checkBiometricsStatus = async () => {
    const biometricsData = await getBiometricsData();
    if (!biometricsData) {
      setCheckBiometricsStatusResult({ status: 'NotSet' })
    } else {
      const { payload, publicKey } = biometricsData;
      const result = await berifyAppApi.user.checkBiometricsStatus(userId ?? payload, { publicKey });
      setCheckBiometricsStatusResult(result)
    }
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Button title="Check Biometrics Status" onPress={() => checkBiometricsStatus()} />
            <Text>{JSON.stringify(checkBiometricsStatusResult, 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,
  }
});

Get wallet

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [getWalletResult, setGetWalletResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.getWallet>>>();

  const getWallet = async () => {
    const result = await berifyAppApi.user.getWallet(userId);
    setGetWalletResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Button title="Get Wallet" onPress={() => getWallet()} />
            <Text>{JSON.stringify(getWalletResult, 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,
  }
});

Connect wallet

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [address, setAddress] = useState('');
  const [connectWalletResult, setConnectWalletResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.connectWallet>>>();

  const connectWallet = async () => {
    const result = await berifyAppApi.user.connectWallet(userId, { address });
    setConnectWalletResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>Wallet Address</Text>
            <TextInput placeholder="Address" onChangeText={setAddress} value={address} style={styles.input} />
            <Button title="Connect Wallet" onPress={() => connectWallet()} />
            <Text>{JSON.stringify(connectWalletResult, 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,
  }
});

Get userId by email

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [email, setEmail] = useState('');
  const [userId, setUserId] = useState('');
  const [getUserIdByEmailResult, setGetUserIdByEmailResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.getUserIdByEmail>>>();

  const getUserIdByEmail = async () => {
    const result = await berifyAppApi.user.getUserIdByEmail(userId, email);
    setGetUserIdByEmailResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Button title="Get UserId By Email" onPress={() => getUserIdByEmail()} />
            <Text>{JSON.stringify(getUserIdByEmailResult, 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,
  }
});

Save product

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [batchId, setBatchId] = useState('');
  const [saveProductResult, setSaveProductResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.saveProduct>>>();

  const saveProduct = async () => {
    const result = await berifyAppApi.user.saveProduct(userId, batchId);
    setSaveProductResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>BatchId</Text>
            <TextInput placeholder="BatchId" onChangeText={setBatchId} value={batchId} style={styles.input} />
            <Button title="Save Product" onPress={() => saveProduct()} />
            <Text>{JSON.stringify(saveProductResult, 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,
  }
});

Remove product

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [batchId, setBatchId] = useState('');
  const [removeProductResult, setRemoveProductResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.removeProduct>>>();

  const removeProduct = async () => {
    const result = await berifyAppApi.user.removeProduct(userId, batchId);
    setRemoveProductResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>BatchId</Text>
            <TextInput placeholder="BatchId" onChangeText={setBatchId} value={batchId} style={styles.input} />
            <Button title="Remove Product" onPress={() => removeProduct()} />
            <Text>{JSON.stringify(removeProductResult, 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,
  }
});

Remove scan history

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [scanId, setScanId] = useState('');
  const [removeScanHistoryResult, setRemoveScanHistoryResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.removeScanHistory>>>();

  const removeScanHistory = async () => {
    const result = await berifyAppApi.user.removeScanHistory(userId, +scanId);
    setRemoveScanHistoryResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>ScanId</Text>
            <TextInput placeholder="ScanId" onChangeText={setScanId} value={scanId} style={styles.input} />
            <Button title="Remove Scan History" onPress={() => removeScanHistory()} />
            <Text>{JSON.stringify(removeScanHistoryResult, 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,
  }
});

Remove all scan history

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView } from 'react-native';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [removeAllScanHistoryResult, setRemoveAllScanHistoryResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.removeAllScanHistory>>>();

  const removeAllScanHistory = async () => {
    const result = await berifyAppApi.user.removeAllScanHistory(userId);
    setRemoveAllScanHistoryResult(result);
  }

  return (
    <ScrollView>
      <View>
        <Text>UserId</Text>
        <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} />
        <Button title="Remove All Scan History" onPress={() => removeAllScanHistory()} />
        <Text>{JSON.stringify(removeAllScanHistoryResult, null, 2)}</Text>
      </View>
    </ScrollView>
  );
};

Get user

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppOpenApi = 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
  });

  const [userId, setUserId] = useState('');
  const [getUserResult, setGetUserResult] = useState<Awaited<ReturnType<typeof berifyAppOpenApi.user.get>>>();

  const getUser = async () => {
    const result = await berifyAppOpenApi.user.get(userId);
    setGetUserResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Button title="Get User" onPress={() => getUser()} />
            <Text>{JSON.stringify(getUserResult, 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,
  }
});

Update user

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  const berifyAppApi = new BerifyAppApi({
    host: 'https://sandbox-staging-app.berify.io',
    env: ''
  });

  const [userId, setUserId] = useState('');
  const [image, setImage] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [username, setUsername] = useState('');
  const [updateUserResult, setUpdateUserResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.update>>>();

  const updateUser = async () => {
    const result = await berifyAppApi.user.update(userId, { image, firstName, lastName, username });
    setUpdateUserResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>Image</Text>
            <TextInput placeholder="Image" onChangeText={setImage} value={image} style={styles.input} />
            <Text>FirstName</Text>
            <TextInput placeholder="FirstName" onChangeText={setFirstName} value={firstName} style={styles.input} />
            <Text>LastName</Text>
            <TextInput placeholder="LastName" onChangeText={setLastName} value={lastName} style={styles.input} />
            <Text>Username</Text>
            <TextInput placeholder="Username" onChangeText={setUsername} value={username} style={styles.input} />
            <Button title="Update User" onPress={() => updateUser()} />
            <Text>{JSON.stringify(updateUserResult, 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,
  }
});

Delete user

import BerifyAppApi from '@bytexbyte/berify-app-open-api';
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ScrollView, SafeAreaView, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {

  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
  });

  const [userId, setUserId] = useState('');
  const [deleteUserResult, setDeleteUserResult] = useState<Awaited<ReturnType<typeof berifyAppApi.user.delete>>>();

  const deleteUser = async () => {
    const result = await berifyAppApi.user.delete(userId);
    setDeleteUserResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Button title="Delete User" onPress={() => deleteUser()} />
            <Text>{JSON.stringify(deleteUserResult, 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,
  }
});

API Example Implementation

What you'll need​

Install and Configure​

Install​

iOS​

Android​

Example​

Check biometrics status​

Get wallet​

Connect wallet​

Get userId by email​

Save product​

Remove product​

Remove scan history​

Remove all scan history​

Get user​

Update user​

Delete user​

What you'll need

Install and Configure

Install

iOS

Android

Example

Check biometrics status

Get wallet

Connect wallet

Get userId by email

Save product

Remove product

Remove scan history

Remove all scan history

Get user

Update user

Delete user