react-native-scanner/App.js

import React, {useState} from 'react';
import {SafeAreaView, View} from 'react-native';

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

import Settings from './Pages/Settings';
import Nfc from './Pages/Nfc';
import {UseScannerSession} from './utils';
import InitScanner from './Pages/InitScanner';
import {BottomNavigation, PaperProvider} from 'react-native-paper';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

//NfcManager.start();

const Tab = createBottomTabNavigator();

function App() {
  const {scannerSession, setScannerSession} = UseScannerSession();

  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:
      Colors.darker /*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;
  };*/

  /*
  if (!hasNfc) {
    return (
      <View>
        <Text>NFC not supported</Text>
      </View>
    );
  }
*/

  /*
  <TabBar>
              <TabBar.Item
                title="QR-Code"
                onPress={() => setSelectedTab('1')}
                selected={selectedTab === '1'}>
                {<QrCode setScannerSession={setScannerSession} />}
              </TabBar.Item>
              <TabBar.Item
                title="NFC"
                onPress={() => setSelectedTab('2')}
                selected={selectedTab === '2'}>
                {<Nfc />}
              </TabBar.Item>
              <TabBar.Item
                title="Settings"
                onPress={() => setSelectedTab('3')}
                selected={selectedTab === '3'}>
                {<Settings />}
              </TabBar.Item>
            </TabBar>
*/

  const [index, setIndex] = useState(0);
  const [routes] = useState([
    {
      key: 'nfc',
      title: 'NFC',
    },
    {key: 'settings', title: 'Settings'},
  ]);

  const NfcRoute = () => <Nfc />;
  const SettingsRoute = () => (
    <Settings setScannerSession={setScannerSession} />
  );

  const renderScene = BottomNavigation.SceneMap({
    nfc: NfcRoute,
    settings: SettingsRoute,
  });

  return (
    <PaperProvider>
      <SafeAreaView style={backgroundStyle}>
        <View
          style={{
            height: '100%',
            width: '100%',
          }}>
          {scannerSession === null || scannerSession === undefined ? (
            <InitScanner setScannerSession={setScannerSession} />
          ) : (
            <BottomNavigation
              navigationState={{index, routes}}
              onIndexChange={setIndex}
              renderScene={renderScene}
            />
          )}
        </View>
      </SafeAreaView>
    </PaperProvider>
  );
}

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>
          }
        /> */