resolve depreciation warnings

amnet-native/app/ServerAddModal.tsx

@@ -1,8 +1,8 @@
-import {useModalStyles} from "../utils/ModalStyles";
-import {Card, Paragraph, useTheme} from "react-native-paper";
+import {Card, Text, useTheme} from "react-native-paper";
 import {useCallback, useEffect, useLayoutEffect, useState} from "react";
 import {Alert, Platform, TextInput, TouchableOpacity, View} from "react-native";
 
+import {useModalStyles} from "../utils/ModalStyles";
 import RealmContext from "../models/RealmContext";
 import {AMServer} from "../models/AMServer";
 
@@ -24,7 +24,7 @@ export default function ServerAddModal({route, navigation}) {
         useLayoutEffect(() => {
             navigation.setOptions({
                 headerLeft: () => <TouchableOpacity onPress={() => navigation.goBack()}>
-                    <Paragraph style={modalStyles.headerText}>Cancel</Paragraph>
+                    <Text variant="bodyMedium" style={modalStyles.headerText}>Cancel</Text>
                 </TouchableOpacity>,
             });
         }, [navigation, modalStyles]);
@@ -43,7 +43,7 @@ export default function ServerAddModal({route, navigation}) {
         const themeOptions = urlValid ? modalStyles.headerText : {color: theme.colors.outline};
         navigation.setOptions({
             headerRight: () => <TouchableOpacity disabled={!urlValid} onPress={() => saveServer(serverAddress)}>
-                <Paragraph style={{...themeOptions, fontWeight: "600"}}>Save</Paragraph>
+                <Text variant="bodyMedium" style={{...themeOptions, fontWeight: "600"}}>Save</Text>
             </TouchableOpacity>
         })
     }, [navigation, modalStyles, serverAddress]);
@@ -97,9 +97,9 @@ export default function ServerAddModal({route, navigation}) {
         <Card mode="contained">
             <Card.Content>
                 <View style={{...modalStyles.formItemRow, gap: 10}}>
-                    <Paragraph style={{...modalStyles.formItemName, minWidth: 0}}>
+                    <Text variant="bodyMedium" style={{...modalStyles.formItemName, minWidth: 0}}>
                         Address
-                    </Paragraph>
+                    </Text>
                     <TextInput style={modalStyles.formItemInput}
                                autoFocus
                                numberOfLines={1}
@@ -115,9 +115,9 @@ export default function ServerAddModal({route, navigation}) {
             </Card.Content>
         </Card>
 
-        <Paragraph style={modalStyles.formFootnote}>
+        <Text variant="bodyMedium" style={modalStyles.formFootnote}>
             AMNet uses HTTP by default. HTTPS will not work unless specifically configured using HTTP.SYS
-        </Paragraph>
+        </Text>
     </View>)
 }
 

amnet-native/app/ServerCardIn.tsx

@@ -1,8 +1,8 @@
 import {BSON} from "realm";
 import NfcManager from "react-native-nfc-manager";
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from "react";
-import {Alert, Platform, RefreshControl, ScrollView, Share, StyleSheet, Text, View} from "react-native";
-import {ActivityIndicator, Button, IconButton, Paragraph, Title, useTheme} from "react-native-paper";
+import {ActivityIndicator, Button, IconButton, Text, useTheme} from "react-native-paper";
+import {Alert, Platform, RefreshControl, ScrollView, Share, StyleSheet, View} from "react-native";
 import {
     CircleCheck,
     CircleDot,
@@ -97,8 +97,8 @@ export default function ServerCardIn({route, navigation}) {
     const [serverReloadCounter, setServerReloadCounter] = useState<number>(0);
     const [serverConnectionSuccess, setServerConnectionSuccess] = useState<boolean | null>(null);
 
-    const [userSelectedCard, setUserSelectedCard] = useState<AMCard>(null);
-    const [cardInCompleted, setCardInCompleted] = useState<boolean>(null);
+    const [userSelectedCard, setUserSelectedCard] = useState<AMCard | null>(null);
+    const [cardInCompleted, setCardInCompleted] = useState<boolean | null>(null);
 
     const disableCardIn = useMemo(() => cardInCompleted !== null || !serverConnectionSuccess, [cardInCompleted, serverConnectionSuccess]);
 
@@ -256,7 +256,7 @@ export default function ServerCardIn({route, navigation}) {
         return (
             <View style={{flex: 1, justifyContent: "center", alignItems: "center", gap: 10}}>
                 <ActivityIndicator animating/>
-                <Paragraph>Connecting to server...</Paragraph>
+                <Text variant="bodyMedium">Connecting to server...</Text>
             </View>
         )
     }
@@ -267,8 +267,7 @@ export default function ServerCardIn({route, navigation}) {
             <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>
+                    <Text variant="bodyMedium" style={styles.sectionTitle}>{server.gameId ? `Play ${getGameName(server.gameId)}` : "Selected Card"}</Text>
                     {selectedCard ? <>
                             <ICCard actionDisabled
                                     card={selectedCard}
@@ -311,7 +310,7 @@ export default function ServerCardIn({route, navigation}) {
 
                 {cards.length > 0 && (
                     <View style={styles.section}>
-                        <Title style={styles.sectionTitle}>Additional Cards</Title>
+                        <Text variant="titleLarge" style={styles.sectionTitle}>Additional Cards</Text>
                         <Button mode="contained"
                                 textColor="white"
                                 buttonColor={theme.colors.tertiary}
@@ -346,11 +345,11 @@ function StatusAlert(props: {
     if (!props.connectionEstablished) {
         return (
             <AMUIStatusAlert color="red" icon={WifiOff} title="Connection Failed">
-                <Paragraph>
-                    There was an issue connecting to <Paragraph
-                    style={{fontFamily: "JetBrainsMono_400Regular"}}>{props.server.serverAddress}</Paragraph>.
+                <Text variant="bodyMedium">
+                    There was an issue connecting to <Text variant="bodyMedium"
+                    style={{fontFamily: "JetBrainsMono_400Regular"}}>{props.server.serverAddress}</Text>.
                     Check the network connection and try again.
-                </Paragraph>
+                </Text>
             </AMUIStatusAlert>
         )
     }
@@ -359,9 +358,9 @@ function StatusAlert(props: {
     if (props.server.timeSinceLastPoll === null) {
         return (
             <AMUIStatusAlert color="#822eff" icon={TvMinimalPlay} title="Server Startup">
-                <Paragraph>
+                <Text variant="bodyMedium">
                     Scanning a card below may not have any effect until the service has fully started up.
-                </Paragraph>
+                </Text>
             </AMUIStatusAlert>
         )
     }

amnet-native/app/ServerManager.tsx

@@ -1,6 +1,6 @@
 import {getGameName} from "amnet-shared";
 import {FlatList, Platform, View} from "react-native";
-import {Button, Paragraph, useTheme} from "react-native-paper";
+import {Button, Text, useTheme} from "react-native-paper";
 import React, {useCallback, useLayoutEffect, useMemo, useState} from "react";
 import {Globe, History, Joystick, Plus, ServerOff} from "lucide-react-native";
 
@@ -14,7 +14,7 @@ import RealmContext from "../models/RealmContext";
 const {useQuery} = RealmContext;
 
 function ServerCard(props: { server: AMServer, navigation: any }) {
-    const gameName = useMemo(() => getGameName(props.server.gameId), [props.server.gameId]);
+    const gameName = useMemo(() => getGameName(props.server.gameId ?? ''), [props.server.gameId]);
     const pageCallback = useCallback(() => {
         props.navigation.navigate('server', {
             serverId: props.server._id.toHexString()
@@ -25,21 +25,21 @@ function ServerCard(props: { server: AMServer, navigation: any }) {
         <AMUICard title={props.server.serverName} onPress={pageCallback}>
             <AMUICardDetail>
                 <Globe size={18} color="gray"/>
-                <Paragraph style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>
+                <Text variant="bodyMedium" style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>
                     {props.server.serverAddress}
-                </Paragraph>
+                </Text>
             </AMUICardDetail>
             {gameName && (
                 <AMUICardDetail>
                     <Joystick size={18} color="gray"/>
-                    <Paragraph style={{color: "gray"}}>{gameName}</Paragraph>
+                    <Text variant="bodyMedium" style={{color: "gray"}}>{gameName}</Text>
                 </AMUICardDetail>
             )}
             <AMUICardDetail>
                 <History size={18} color="gray"/>
                 {props.server.lastUsed
                     ? (<TimeAgo style={{color: "gray"}} dateTo={props.server.lastUsed}/>)
-                    : (<Paragraph style={{color: "gray"}}>never</Paragraph>)}
+                    : (<Text variant="bodyMedium" style={{color: "gray"}}>never</Text>)}
             </AMUICardDetail>
         </AMUICard>
     )

amnet-native/app/card/CardAddModal.tsx

@@ -4,7 +4,7 @@ import React, {useEffect, useState} from "react";
 import {Platform, TouchableOpacity, View} from "react-native";
 import {createNativeStackNavigator} from "@react-navigation/native-stack";
 
-import {Card, Paragraph, Text, Title, useTheme} from "react-native-paper";
+import {Card, Text, useTheme} from "react-native-paper";
 import {ShieldBan, SmartphoneNfc, SquareAsterisk, SquarePlus} from "lucide-react-native";
 
 import ManualCardEntry from "./ManualCardEntry";
@@ -34,10 +34,10 @@ function CardAddMethodSelector({navigation}) {
     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"}}>
+                <Text variant="titleLarge" style={{textAlign: "center", fontSize: 32, fontWeight: "bold"}}>Add new Card</Text>
+                <Text variant="bodyMedium" style={{textAlign: "center"}}>
                     AMNet supports scanning physical cards, entering details manually or generating new ones.
-                </Paragraph>
+                </Text>
             </View>
 
             {nfcSupported !== null && (
@@ -93,7 +93,7 @@ function MethodCard(props: {
                     </View>
                     <View style={{flexShrink: 1}}>
                         <Text style={{fontSize: large ? 16 : 14}}>{props.title}</Text>
-                        {props.description && (<Paragraph style={{fontSize: 12}}>{props.description}</Paragraph>)}
+                        {props.description && (<Text variant="bodyMedium" style={{fontSize: 12}}>{props.description}</Text>)}
                     </View>
                 </Card.Content>
             </Card>

amnet-native/app/card/CardEditorModal.tsx

@@ -1,5 +1,5 @@
 import {BSON} from "realm";
-import {Card, Divider, Paragraph, useTheme} from "react-native-paper";
+import {Card, Divider, Text, useTheme} from "react-native-paper";
 import {useCallback, useEffect, useLayoutEffect, useState} from "react";
 import {Platform, TextInput, TouchableOpacity, View} from "react-native";
 
@@ -48,7 +48,7 @@ export default function CardEditorModal({navigation, route}) {
         useLayoutEffect(() => {
             navigation.setOptions({
                 headerLeft: () => <TouchableOpacity onPress={() => navigation.goBack()}>
-                    <Paragraph style={modalStyles.headerText}>Cancel</Paragraph>
+                    <Text variant="bodyMedium" style={modalStyles.headerText}>Cancel</Text>
                 </TouchableOpacity>,
             });
         }, [navigation, modalStyles]);
@@ -57,7 +57,7 @@ export default function CardEditorModal({navigation, route}) {
     useLayoutEffect(() => {
         navigation.setOptions({
             headerRight: () => <TouchableOpacity onPress={() => updateCardCallback(cardName)} disabled={!cardName.length}>
-                <Paragraph style={modalStyles.headerText}>Save</Paragraph>
+                <Text variant="bodyMedium" style={modalStyles.headerText}>Save</Text>
             </TouchableOpacity>
         });
     }, [cardName]);
@@ -67,9 +67,9 @@ export default function CardEditorModal({navigation, route}) {
             <Card mode="contained">
                 <Card.Content>
                     <View style={modalStyles.formItemRow}>
-                        <Paragraph style={modalStyles.formItemName}>
+                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                             Card Name
-                        </Paragraph>
+                        </Text>
                         <TextInput style={modalStyles.formItemInput}
                                    autoFocus
                                    numberOfLines={1}
@@ -82,9 +82,9 @@ export default function CardEditorModal({navigation, route}) {
                     <Divider style={{marginVertical: 15}}/>
 
                     <View style={modalStyles.formItemRow}>
-                        <Paragraph style={modalStyles.formItemName}>
+                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                             Access Code
-                        </Paragraph>
+                        </Text>
                         <TextInput readOnly
                                    numberOfLines={1}
                                    value={card?.code.match(/.{1,4}/g)?.join(" ")}

amnet-native/app/card/ManualCardEntry.tsx

@@ -1,7 +1,7 @@
 import {generateCardNumber, DecodeAMAccessCode} from "amnet-shared";
 import {useCallback, useEffect, useLayoutEffect, useState} from "react";
 import {Alert, Platform, TextInput, TouchableOpacity, View} from "react-native";
-import {Button, Card, Divider, Paragraph, useTheme} from "react-native-paper";
+import {Button, Card, Divider, Text, useTheme} from "react-native-paper";
 
 import {AMCard} from "../../models/AMCard";
 import RealmContext from "../../models/RealmContext";
@@ -75,7 +75,7 @@ export default function CardAddModal({navigation, route}) {
         navigation.setOptions({
             headerRight: () => <TouchableOpacity disabled={!canSave}
                                                  onPress={() => cardAddCallback(cardNumber, cardName)}>
-                <Paragraph style={{...themeOptions, fontWeight: "600"}}>Save</Paragraph>
+                <Text variant="bodyMedium" style={{...themeOptions, fontWeight: "600"}}>Save</Text>
             </TouchableOpacity>
         })
     }, [navigation, modalStyles, cardName, cardNumber]);
@@ -92,9 +92,9 @@ export default function CardAddModal({navigation, route}) {
             <Card mode="contained">
                 <Card.Content>
                     <View style={modalStyles.formItemRow}>
-                        <Paragraph style={modalStyles.formItemName}>
+                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                             Card Name
-                        </Paragraph>
+                        </Text>
                         <TextInput style={modalStyles.formItemInput}
                                    autoFocus
                                    numberOfLines={1}
@@ -107,9 +107,9 @@ export default function CardAddModal({navigation, route}) {
                     <Divider style={{marginVertical: 15}}/>
 
                     <View style={modalStyles.formItemRow}>
-                        <Paragraph style={modalStyles.formItemName}>
+                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                             Access Code
-                        </Paragraph>
+                        </Text>
                         <TextInput numberOfLines={1}
                                    keyboardType="numeric"
                                    placeholder="0000 0000 0000 0000 0000"

amnet-native/app/card/PhyscialCardScan.tsx

@@ -1,5 +1,5 @@
 import {useNavigation} from "@react-navigation/native";
-import {Card, Paragraph, useTheme} from "react-native-paper";
+import {Card, Text, useTheme} from "react-native-paper";
 import {useCallback, useLayoutEffect, useState} from "react";
 import {TextInput, TouchableOpacity, View} from "react-native";
 
@@ -52,7 +52,7 @@ export default function PhysicalCardScan() {
 
         navigation.setOptions({
             headerRight: () => <TouchableOpacity disabled={!canSave} onPress={() => handleScan()}>
-                <Paragraph style={{...themeOptions, fontWeight: "600"}}>Scan</Paragraph>
+                <Text variant="bodyMedium" style={{...themeOptions, fontWeight: "600"}}>Scan</Text>
             </TouchableOpacity>
         })
     }, [navigation, modalStyles, cardName]);
@@ -62,9 +62,9 @@ export default function PhysicalCardScan() {
             <Card mode="contained">
                 <Card.Content>
                     <View style={modalStyles.formItemRow}>
-                        <Paragraph style={modalStyles.formItemName}>
+                        <Text variant="bodyMedium" style={modalStyles.formItemName}>
                             Card Name
-                        </Paragraph>
+                        </Text>
                         <TextInput style={modalStyles.formItemInput}
                                    autoFocus
                                    numberOfLines={1}
@@ -76,10 +76,10 @@ export default function PhysicalCardScan() {
                 </Card.Content>
             </Card>
 
-            <Paragraph style={modalStyles.formFootnote}>
+            <Text variant="bodyMedium" style={modalStyles.formFootnote}>
                 Ensure you have either an Amusement IC or Transport card ready to scan.
                 After the scan has completed, the card will be saved to your device.
-            </Paragraph>
+            </Text>
         </View>
     )
 }

amnet-native/components/AMUICard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {TouchableOpacity, View} from "react-native";
-import {Card, Title, useTheme} from "react-native-paper";
+import {Card, Text, useTheme} from "react-native-paper";
 
 export interface AMUICardActionProps {
     actionIcon?: Readonly<React.ReactNode>,
@@ -48,7 +48,7 @@ function CardComponent(props: AMUICardProps & AMUICardActionProps) {
                 gap: 5
             }}>
                 <View style={{flexGrow: 1}}>
-                    <Title style={{fontWeight: "bold"}}>{props.title}</Title>
+                    <Text variant="titleLarge" style={{fontWeight: "bold"}}>{props.title}</Text>
                     <View style={{display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10}}>
                         {props.children}
                     </View>

amnet-native/components/AMUIStatusAlert.tsx

@@ -1,6 +1,6 @@
 import {View} from "react-native";
 import React, {ReactNode} from "react";
-import {Card, Title} from "react-native-paper";
+import {Card, Text} from "react-native-paper";
 import {LucideIcon, LucideProps} from "lucide-react-native";
 
 export function AMUIStatusAlert(props: { title: string, color: string, icon: LucideIcon, children?: ReactNode }) {
@@ -9,7 +9,7 @@ export function AMUIStatusAlert(props: { title: string, color: string, icon: Luc
             <Card.Content>
                 <View style={{alignItems: "center", flexDirection: "row", gap: 10}}>
                     {renderIconWithProps(props.icon, {size: 22, color: props.color})}
-                    <Title style={{color: props.color}}>{props.title}</Title>
+                    <Text variant="titleLarge" style={{color: props.color}}>{props.title}</Text>
                 </View>
                 {props.children}
             </Card.Content>

amnet-native/components/EmptyStatePlaceholder.tsx

@@ -1,13 +1,13 @@
 import {View} from "react-native";
-import {Paragraph} from "react-native-paper";
+import {Text} from "react-native-paper";
 
 export function EmptyStatePlaceholder(props: { message: string, icon: React.ReactNode }) {
     return (
         <View style={{display: "flex", gap: 5, alignItems: "center"}}>
             {props.icon}
-            <Paragraph style={{color: "gray", fontSize: 14}}>
+            <Text variant="bodyMedium" style={{color: "gray", fontSize: 14}}>
                 {props.message}
-            </Paragraph>
+            </Text>
         </View>
     )
 }

amnet-native/components/TimeAgo.tsx

@@ -1,7 +1,7 @@
+import {Text} from "react-native-paper";
 import React, {useEffect, useState} from 'react';
 import {StyleProp, TextStyle} from 'react-native';
 import {formatDistance} from 'date-fns/formatDistance';
-import {Paragraph} from "react-native-paper";
 
 interface Props {
     dateTo: Date;
@@ -28,11 +28,11 @@ const TimeAgo: React.FC<Props> = ({
     }, [dateFrom, updateInterval]);
 
     return (
-        <Paragraph {...{style}}>
+        <Text variant="bodyMedium" {...{style}}>
             {formatDistance(dateTo, dateFrom || currentDate, {
                 addSuffix: !hideAgo,
             })}
-        </Paragraph>
+        </Text>
     );
 };
 

amnet-native/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "strictNullChecks": true,
+    "strictNullChecks": false,
     "moduleResolution": "bundler"
   },
   "extends": "expo/tsconfig.base"