react-native-scanner/Pages/Nfc/index.js

import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';
import EncryptedStorage from 'react-native-encrypted-storage';
import NfcManager, {Ndef, NfcEvents} from 'react-native-nfc-manager';
import {Button, Snackbar} from 'react-native-paper';
import {Buffer} from 'buffer';

export default function Nfc() {
  const [hasNfc, setHasNFC] = useState(null);
  const [foundNfcTag, setFoundNfcTag] = useState('');
  const [nfcScanningActive, setNfcScanningActive] = useState(false);
  const [snackbarVisible, setSnackbarVisible] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState('');

  useEffect(() => {
    const checkIsSupported = async () => {
      const deviceIsSupported = await NfcManager.isSupported();

      setHasNFC(deviceIsSupported);
      if (deviceIsSupported) {
        await NfcManager.start();
      }
    };

    checkIsSupported();

    NfcManager.setEventListener(NfcEvents.DiscoverTag, async tag => {
      const foundTag = Ndef.uri.decodePayload(tag.ndefMessage[0].payload);

      console.log('tag found', foundTag);

      setFoundNfcTag(foundTag);
      setSnackbarVisible(true);

      try {
        const scannerHost = await EncryptedStorage.getItem('scanner_host');
        const scannerSession = await EncryptedStorage.getItem(
          'scanner_session',
        );

        console.log('scanner host found', scannerHost, scannerSession);

        fetch(scannerHost + '/scan', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Authorization': scannerSession,
          },
          body: JSON.stringify({
            scanResult: Buffer.from(foundTag).toString('base64'),
          }),
        })
          .then(res => {
            if (res.status === 200) {
              setSnackbarMessage('Sent to dashboard');
              return res.text();
            }

            setSnackbarMessage('Failed to send');

            return Promise.reject(res.status);
          })
          .then(data => console.log('data', data))
          .catch(err => console.error(err));
      } catch (err) {
        console.error(err);
      }
    });

    setTimeout(() => {
      setSnackbarVisible(false);
    }, 2000);

    return () => {
      NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
    };
  }, []);

  const readTag = async () => {
    await NfcManager.registerTagEvent();
    setNfcScanningActive(true);
  };

  const unregisterReadTag = async () => {
    await NfcManager.unregisterTagEvent();
    setNfcScanningActive(false);
  };

  if (!hasNfc) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>NFC not supported</Text>
      </View>
    );
  }

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      {nfcScanningActive ? (
        <>
          <Button mode="contained" onPress={unregisterReadTag}>
            Deactivate NFC Tag scanning
          </Button>

          <Text style={{marginTop: 10}}>Found tag:</Text>
          <Text>{foundNfcTag}</Text>
        </>
      ) : (
        <Button mode="contained" onPress={readTag}>
          Activate NFC Tag scanning
        </Button>
      )}
      <Snackbar
        visible={snackbarVisible}
        onDismiss={() => setSnackbarVisible(false)}
        action={{
          label: 'OK',
          onPress: () => setSnackbarVisible(false),
        }}>
        {snackbarMessage}
      </Snackbar>
    </View>
  );
}