additional nfc support checks

amnet-native/App.tsx

@@ -121,7 +121,7 @@ export default function AppRoot() {
 
                             <Stack.Group screenOptions={{presentation: "modal"}}>
                                 <Stack.Screen name="add-server" component={ServerAddModal} options={{title: "Add Server"}}/>
-                                <Stack.Screen name="add-card" component={CardAddModal} options={{title: "Add Card", headerShown: false}}/>
+                                <Stack.Screen name="add-card" component={CardAddModal} options={{title: "Add Card"}}/>
                                 <Stack.Screen name="edit-card" component={CardEditorModal} options={{title: "Edit Card"}}/>
                             </Stack.Group>
                         </Stack.Navigator>

amnet-native/app/ServerCardIn.tsx

@@ -1,4 +1,5 @@
 import {BSON} from "realm";
+import NfcManager from "react-native-nfc-manager";
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from "react";
 import {ActivityIndicator, Button, IconButton, Paragraph, Title, useTheme} from "react-native-paper";
 import {Platform, RefreshControl, ScrollView, Share, StyleSheet, Text, TouchableOpacity, View} from "react-native";
@@ -43,6 +44,16 @@ export default function ServerCardIn({route, navigation}) {
         query: q => q.sorted("lastUsed", true)
     });
 
+    // nfc support
+    const [nfcSupported, setNfcSupported] = useState<boolean | null>(Platform.OS === 'android' ? false : null);
+    useEffect(() => {
+        if (nfcSupported !== null) {
+            return;
+        }
+
+        NfcManager.isSupported().then(setNfcSupported);
+    }, []);
+
     // server state
     const [serverRefreshing, setServerRefreshing] = useState<boolean>(false);
     const [serverReloadCounter, setServerReloadCounter] = useState<number>(0);
@@ -201,12 +212,12 @@ export default function ServerCardIn({route, navigation}) {
     }
 
     return (
-        <ScrollView contentInsetAdjustmentBehavior="automatic"
-                    refreshControl={<RefreshControl refreshing={serverRefreshing} onRefresh={performRefresh}/>}>
+        <ScrollView contentInsetAdjustmentBehavior="automatic" refreshControl={<RefreshControl refreshing={serverRefreshing} onRefresh={performRefresh}/>}>
             <View style={styles.container}>
                 <StatusAlert server={server} connectionEstablished={serverConnectionSuccess}/>
                 <View style={styles.section}>
-                    <Title style={styles.sectionTitle}>{server.gameId ? `Play ${getGameName(server.gameId)}` : "Selected Card"}</Title>
+                    <Title
+                        style={styles.sectionTitle}>{server.gameId ? `Play ${getGameName(server.gameId)}` : "Selected Card"}</Title>
                     {selectedCard ? <>
                             <ICCard actionDisabled
                                     card={selectedCard}
@@ -214,17 +225,17 @@ export default function ServerCardIn({route, navigation}) {
                                 {serverDefaultCard?.code == selectedCard.code && <DefaultCardDetail/>}
                             </ICCard>
                             <View style={{display: "flex", flexDirection: "row", gap: 5}}>
-                                <Button textColor="white"
+                                <Button style={{flex: 1}}
+                                        textColor="white"
                                         onPress={cardInCallback}
                                         disabled={disableCardIn}
-                                        style={{flex: 1}}
                                         contentStyle={{flexDirection: 'row-reverse'}}
                                         mode={serverConnectionSuccess ? "contained" : "outlined"}
                                         buttonColor={cardInCompleted === false ? "red" : "green"}
                                         icon={() => <SquareArrowOutUpRight color={disableCardIn ? "gray" : "white"} size={18}/>}>
                                     {cardInCompleted === null ? "Card In" : cardInCompleted ? "Card In Success" : "Failed"}
                                 </Button>
-                                {Platform.OS === 'ios' && (
+                                {nfcSupported === true && (
                                     <IconButton
                                         mode="outlined"
                                         iconColor="#03a9f4"
@@ -240,9 +251,10 @@ export default function ServerCardIn({route, navigation}) {
                             <Button mode="text"
                                     icon={() => <Plus color={theme.colors.primary} size={18}/>}
                                     onPress={() => navigation.navigate('add-card')}>
-                                Add card
+                                Add Card
                             </Button>
-                        </View>}
+                        </View>
+                    }
                 </View>
 
                 {cards.length > 0 && (
@@ -251,8 +263,8 @@ export default function ServerCardIn({route, navigation}) {
                         <Button mode="contained"
                                 textColor="white"
                                 buttonColor={theme.colors.tertiary}
-                                icon={() => <Plus color="white" size={18}/>}
                                 contentStyle={{flexDirection: 'row-reverse'}}
+                                icon={() => <Plus color="white" size={18}/>}
                                 onPress={() => navigation.navigate('add-card')}>
                             Add card
                         </Button>

amnet-native/app/card/CardAddModal.tsx

@@ -1,7 +1,6 @@
-import React from "react";
+import NfcManager from "react-native-nfc-manager";
 import {Platform, TouchableOpacity, View} from "react-native";
-
-import {useNavigation} from "@react-navigation/native";
+import React, {useEffect, useLayoutEffect, useState} from "react";
 import {createNativeStackNavigator} from "@react-navigation/native-stack";
 
 import {Card, Paragraph, Text, Title, useTheme} from "react-native-paper";
@@ -23,25 +22,41 @@ function CardAddModal() {
     )
 }
 
-function CardAddMethodSelector() {
+function CardAddMethodSelector({navigation}) {
     const theme = useTheme();
-    const navigation: any = useNavigation();
+    const [nfcSupported, setNfcSupported] = useState<boolean | null>(null);
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerShown: false
+        });
+    }, []);
+
+    useEffect(() => {
+        NfcManager.isSupported().then(setNfcSupported);
+    }, []);
 
     return (
         <View style={{paddingHorizontal: 15, paddingTop: 90, gap: 8}}>
             <View style={{paddingBottom: 25, gap: 5}}>
                 <Title style={{textAlign: "center", fontSize: 32, fontWeight: "bold"}}>Add new Card</Title>
-                <Paragraph style={{textAlign: "center"}}>AMNet supports scanning physical cards, entering details
-                    manually or generating new ones.</Paragraph>
+                <Paragraph style={{textAlign: "center"}}>
+                    AMNet supports scanning physical cards, entering details manually or generating new ones.
+                </Paragraph>
             </View>
 
-            <MethodCard color="#03a9f4"
-                        icon={<SmartphoneNfc/>}
-                        title="Scan Physical Card"
-                        description="Amusement IC or Transport cards supported"
-                        onPress={() => navigation.navigate('Scan')}/>
+            {nfcSupported !== null && (
+                <>
+                    <MethodCard color="#03a9f4"
+                                icon={<SmartphoneNfc/>}
+                                disabled={!nfcSupported}
+                                title="Scan Physical Card"
+                                description={nfcSupported ? "Amusement IC or Transport cards supported" : "NFC is not supported on this device"}
+                                onPress={() => navigation.navigate('Scan')}/>
 
-            <View></View>
+                    <View></View>
+                </>
+            )}
 
             <MethodCard color={theme.colors.secondary}
                         icon={<SquareAsterisk/>}
@@ -60,6 +75,7 @@ function MethodCard(props: {
     title: string,
     description?: string,
     color: string,
+    disabled?: boolean,
     icon: React.ReactElement,
     onPress: () => void
 }) {
@@ -67,8 +83,8 @@ function MethodCard(props: {
     const large = props.description?.length > 0;
 
     return (
-        <TouchableOpacity onPress={() => props.onPress()}>
-            <Card mode={theme.dark ? "elevated" : "contained"}>
+        <TouchableOpacity onPress={() => !props.disabled && props.onPress()} disabled={props.disabled}>
+            <Card mode={theme.dark ? "elevated" : "contained"} disabled={props.disabled}>
                 <Card.Content style={{display: "flex", flexDirection: "row", alignItems: "center", gap: 15}}>
                     <View style={{
                         borderRadius: large ? 10 : 5,