react-native-qr-code-comparator/App.tsx

import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  Text,
  TouchableOpacity,
  useColorScheme,
  Vibration,
  View,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import QRCodeScanner from 'react-native-qrcode-scanner';
import {Button, Icon, TabBar} from '@ant-design/react-native';

import NfcManager, {Ndef, NfcEvents, NfcTech} from 'react-native-nfc-manager';
import Settings from './Pages/Settings';
import Nfc from './Pages/Nfc';
import QrCode from './Pages/QrCode';

NfcManager.start();

function App(): JSX.Element {
  const [selectedTab, setSelectedTab] = useState('');
  // const [hasNfc, setHasNFC] = useState(false);
  //const [foundTag, setFoundTag] = useState('');

  const colors = {
    nothingScanned: '#95a5a6', // gray
    input: '#9b59b6', // purple
    foundArticle: '#2ecc71', // green
    wrongArticle: '#c0392b', // red
  };

  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  /*
  useEffect(() => {
    const checkIsSupported = async () => {
      const deviceIsSupported = await NfcManager.isSupported();

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

    checkIsSupported();

    NfcManager.setEventListener(NfcEvents.DiscoverTag, (tag: any) => {
      console.log(
        'tag found',
        tag,
        Ndef.uri.decodePayload(tag.ndefMessage[0].payload),
      );
    });

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

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

  const writeNFC = async () => {
    let result = false;

    try {
      await NfcManager.requestTechnology(NfcTech.Ndef);

      const bytes = Ndef.encodeMessage([Ndef.uriRecord('https://umbach.dev')]);

      if (bytes) {
        await NfcManager.ndefHandler.writeNdefMessage(bytes);
        result = true;
      }
    } catch (ex) {
      console.warn(ex);
    } finally {
      NfcManager.cancelTechnologyRequest();
    }

    return result;
  };*/

  const renderContent = (pageText: any) => {
    //console.log(pageText);

    if (pageText === '0') {
      return <QrCode />;
    }

    return (
      <View style={{flex: 1, alignItems: 'center', backgroundColor: 'white'}}>
        {pageText}
      </View>
    );
  };
  /*
  if (!hasNfc) {
    return (
      <View>
        <Text>NFC not supported</Text>
      </View>
    );
  }
*/
  return (
    <SafeAreaView style={backgroundStyle}>
      <View style={{height: '100%', width: '100%'}}>
        <TabBar>
          <TabBar.Item
            title="QR-Code"
            onPress={() => setSelectedTab('1')}
            selected={selectedTab === '1'}>
            {renderContent('0')}
          </TabBar.Item>
          <TabBar.Item
            title="NFC"
            onPress={() => setSelectedTab('2')}
            selected={selectedTab === '2'}>
            {renderContent('0')}
          </TabBar.Item>
          <TabBar.Item
            title="Settings"
            onPress={() => setSelectedTab('3')}
            selected={selectedTab === '3'}>
            {renderContent('0')}
          </TabBar.Item>
        </TabBar>
      </View>
    </SafeAreaView>
  );
}

export default App;

/*
  <Text>Hello world</Text>
        <TouchableOpacity onPress={readTag}>
          <Text style={{color: 'white'}}>Scan Tag</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={{color: 'white'}}>Cancel Scan</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={writeNFC}>
          <Text style={{color: 'white'}}>Write Tag</Text>
        </TouchableOpacity>
*/

/*
<QRCodeScanner
          showMarker={true}
          onRead={data => {
            if (inputCode == '') {
              setInputCode(c => (c = data.data));
              setMarkerStyleBorderColor(colors.input);

              Vibration.vibrate(500);

              setTimeout(
                () => setMarkerStyleBorderColor(colors.nothingScanned),
                500,
              );
            } else {
              setScannedCode(c => (c = data.data));

              if (data.data == inputCode) {
                setMarkerStyleBorderColor(m => (m = colors.foundArticle));

                Vibration.vibrate(100);

                setTimeout(
                  () => setMarkerStyleBorderColor(colors.nothingScanned),
                  500,
                );
              } else {
                setMarkerStyleBorderColor(m => (m = colors.wrongArticle));

                Vibration.vibrate(300);

                setTimeout(
                  () => setMarkerStyleBorderColor(colors.nothingScanned),
                  500,
                );
              }
            }
          }}
          reactivate={true}
          reactivateTimeout={500}
          vibrate={false}
          cameraStyle={{overflow: 'hidden'}}
          markerStyle={{borderColor: markerStyleBorderColor, borderWidth: 5}}
          topViewStyle={{
            alignItems: 'flex-start',
            justifyContent: 'flex-start',
            paddingLeft: 20,
            paddingTop: 20,
            paddingBottom: 20,
            flex: 1,
          }}
          topContent={
            <View>
              <Text style={{fontSize: 16, fontWeight: 'bold'}}>
                Desired article
              </Text>
              <Text
                style={{fontSize: 18, color: '#9b59b6', fontWeight: 'bold'}}>
                {inputCode}
              </Text>
              <Text style={{fontSize: 16, fontWeight: 'bold'}}>
                Scanned article
              </Text>
              <Text
                style={{
                  fontSize: 18,
                  color: '#d35400',
                  fontWeight: 'bold',
                }}>
                {scannedCode}
              </Text>
            </View>
          }
          bottomContent={
            <View>
              <Button
                disabled={inputCode == '' ? true : false}
                type="primary"
                onPress={() => {
                  setInputCode(c => (c = ''));
                  setScannedCode(c => (c = ''));
                  setMarkerStyleBorderColor(s => (s = colors.nothingScanned));
                }}
                style={{width: 220}}>
                Next Article
              </Button>
            </View>
          }
        /> */