Merge pull request #19 from RoboJackets/checkNfcEnabled

Check if NFC is Enabled on App Start

Author: elysseaa

Navigation/RootStack.tsx

@@ -1,20 +1,54 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import NfcManager from 'react-native-nfc-manager';
 import { AuthContext } from '../App';
 import AuthenticationScreen from '../Auth/AuthenticationScreen';
+import NfcEnabledScreen from '../Nfc/NfcEnabledScreen';
 import NavBar from './NavBar';
 
 const Stack = createNativeStackNavigator();
+type NfcState = 'enabled' | 'disabled' | 'unsupported';
 
 function RootStack() {
+  const [nfcEnabled, setNfcEnabled] = useState<NfcState>('disabled');
+
+  useEffect(() => {
+    const isEnabled = async () => {
+      try {
+        const isSupported = await NfcManager.isSupported();
+        if (!isSupported) {
+          setNfcEnabled('unsupported');
+          return;
+        }
+        if (Platform.OS === 'android') {
+          const enabled = await NfcManager.isEnabled();
+          setNfcEnabled(enabled ? 'enabled' : 'disabled');
+        } else if (Platform.OS === 'ios') {
+          setNfcEnabled('enabled');
+        } else {
+          // Platform.OS === "windows" | "macos" | "web"
+          console.log('Not a valid platform for NFC');
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+    isEnabled();
+  }, []);
+
   const auth = useContext(AuthContext);
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
       }}
     >
-      {auth?.authenticated ? (
+      {nfcEnabled !== 'enabled' ? (
+        <Stack.Screen name="NfcEnabledScreen">
+          {() => <NfcEnabledScreen nfcEnabled={nfcEnabled} />}
+        </Stack.Screen>
+      ) : auth?.authenticated ? (
         <Stack.Screen name="Main" component={NavBar} />
       ) : (
         <Stack.Screen name="Authentication">{() => <AuthenticationScreen />}</Stack.Screen>

Nfc/NfcEnabledScreen.tsx

@@ -0,0 +1,82 @@
+import MaterialIcons from '@react-native-vector-icons/material-icons';
+import React, { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import nfcManager from 'react-native-nfc-manager';
+
+type NfcEnabledProps = {
+  nfcEnabled: string;
+};
+
+function NfcEnabledScreen({ nfcEnabled }: NfcEnabledProps) {
+  const [restart, setRestart] = useState(false);
+
+  const enableNfc = async () => {
+    await nfcManager.goToNfcSetting();
+    setRestart(true);
+    return;
+  };
+
+  return (
+    <>
+      {nfcEnabled === 'unsupported' ? (
+        <View style={styles.view}>
+          <MaterialIcons
+            name={'error-outline'}
+            size={100}
+            color="#b00020"
+            style={styles.errorIcon}
+          />
+          <Text style={styles.headerText}>NFC is unsupported</Text>
+          <Text style={styles.bodyText}>NFC capability is unsupported on this device.</Text>
+        </View>
+      ) : !restart ? (
+        <View style={styles.view}>
+          <MaterialIcons
+            name={'error-outline'}
+            size={100}
+            color="#b00020"
+            style={styles.errorIcon}
+          />
+          <Text style={styles.headerText}>NFC is disabled</Text>
+          <Text style={styles.bodyText}>Please enable NFC and restart the app to continue</Text>
+          <Button onPress={enableNfc} color="#EEB211" title="Enable NFC" />
+        </View>
+      ) : (
+        <View style={styles.view}>
+          <MaterialIcons
+            name={'error-outline'}
+            size={100}
+            color="#B78300"
+            style={styles.errorIcon}
+          />
+          <Text style={styles.headerText}>Restart to continue</Text>
+          <Text style={styles.bodyText}>
+            {`If you've enabled NFC, just restart the app and you'll be on your way!`}
+          </Text>
+        </View>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  bodyText: {
+    fontSize: 20,
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  errorIcon: {
+    padding: 10,
+  },
+  headerText: {
+    fontSize: 30,
+  },
+  view: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    margin: 10,
+  },
+});
+
+export default NfcEnabledScreen;