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

npm i @bytexbyte/berify-app-open-api 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

Get specific tag

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 [tokenId, setTokenId] = useState('');
  const [tagResult, setTagResult] = useState<Awaited<ReturnType<typeof berifyAppApi.tags.get>>>();

  const getTag = async () => {
    if (tokenId) {
      const result = await berifyAppApi.tags.get(tokenId)
      setTagResult(result)
    }
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <TextInput
              placeholder="TokenId"
              value={tokenId}
              onChangeText={setTokenId}
              style={styles.input}
            />
            <Button title="Submit" onPress={getTag} />
            <Text>{JSON.stringify(tagResult, 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 specific tags

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

export default function App() {

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

  const [batchId, setBatchId] = useState('');
  const [batchSerialNumberGte, setBatchSerialNumberGte] = useState('');
  const [batchSerialNumberLte, setBatchSerialNumberLte] = useState('');
  const [tagsResult, setTagsResult] = useState<Awaited<ReturnType<typeof berifyAppApi.tags.getMany>>>();

  const getTags = async () => {
    if (batchId && batchSerialNumberGte && batchSerialNumberLte) {
      const result = await berifyAppApi.tags.getMany({ batchId, batchSerialNumberGte, batchSerialNumberLte });
      setTagsResult(result);
    }
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <TextInput 
              placeholder="BatchId" 
              value={batchId} 
              onChangeText={setBatchId} 
              style={styles.input} 
            />
            <TextInput 
              placeholder="BatchSerialNumberGte" 
              value={batchSerialNumberGte} 
              onChangeText={setBatchSerialNumberGte} 
              style={styles.input} 
            />
            <TextInput 
              placeholder="BatchSerialNumberLte" 
              value={batchSerialNumberLte} 
              onChangeText={setBatchSerialNumberLte} 
              style={styles.input} 
            />
            <Button title="Submit" onPress={getTags} />
            <Text>{JSON.stringify(tagsResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

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

Update tag info visible

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

export default function App() {

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

  const [tokenId, setTokenId] = useState('');
  const [ownerId, setOwnerId] = useState('');
  const [isInfoVisible, setIsInfoVisible] = useState('');
  const [updateTagInfoVisibleResult, setUpdateTagInfoVisibleResult] = useState<Awaited<ReturnType<typeof berifyAppApi.tags.updateInfoVisible>>>();

  const updateTagInfoVisible = async () => {
    const isVisible = isInfoVisible === 'true';
    const result = await berifyAppApi.tags.updateInfoVisible(tokenId, { ownerId, isInfoVisible: isVisible });
    setUpdateTagInfoVisibleResult(result);
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <TextInput 
              placeholder="tokenId" 
              value={tokenId} 
              onChangeText={setTokenId} 
              style={styles.input} 
            />
            <TextInput 
              placeholder="ownerId" 
              value={ownerId} 
              onChangeText={setOwnerId} 
              style={styles.input} 
            />
            <TextInput 
              placeholder="isInfoVisible" 
              value={isInfoVisible} 
              onChangeText={setIsInfoVisible} 
              style={styles.input} 
            />
            <Button title="Submit" onPress={updateTagInfoVisible} />
            <Text>{JSON.stringify(updateTagInfoVisibleResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

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

Update tag owner

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 [tokenId, setTokenId] = useState('');
  const [ownerId, setOwnerId] = useState('');
  const [updateTagOwnerResult, setUpdateTagOwnerResult] = useState<Awaited<ReturnType<typeof berifyAppApi.tags.update>>>();

  const updateTagOwner = async () => {
    const result = await berifyAppApi.tags.update(tokenId, { ownerId })
    setUpdateTagOwnerResult(result)
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Update Tag Owner</Text>
            <TextInput placeholder="tokenId" value={tokenId} onChangeText={setTokenId} style={styles.input} />
            <TextInput placeholder="ownerId" value={ownerId} onChangeText={setOwnerId} style={styles.input} />
            <Button title="Update Tag Owner" onPress={() => updateTagOwner()} />
            <Text>{JSON.stringify(updateTagOwnerResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

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

Undo transfer tag owner

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 [tokenId, setTokenId] = useState('');
  const [ownerId, setOwnerId] = useState('');
  const [undoTransferTagOwnerResult, setUndoTransferOwnerResult] = useState<Awaited<ReturnType<typeof berifyAppApi.tags.undoTransferOwner>>>();

  const undoTransferTagOwner = async () => {
    const result = await berifyAppApi.tags.undoTransferOwner(tokenId, { ownerId })
    setUndoTransferOwnerResult(result)
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Undo Transfer Tag Owner</Text>
            <TextInput placeholder="tokenId" value={tokenId} onChangeText={setTokenId} style={styles.input} />
            <TextInput placeholder="ownerId" value={ownerId} onChangeText={setOwnerId} style={styles.input} />
            <Button title="Undo Transfer Tag Owner" onPress={() => undoTransferTagOwner()} />
            <Text>{JSON.stringify(undoTransferTagOwnerResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

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