Update react-native example for iOS

afilini · Oct 15, 2024 · bd4e61e · bd4e61e
1 parent 2483430
commit bd4e61e
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 21 deletions.
diff --git a/sdk/libportal-react-native/example/ios/LibportalReactNativeExample/Info.plist b/sdk/libportal-react-native/example/ios/LibportalReactNativeExample/Info.plist
@@ -48,5 +48,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NFCReaderUsageDescription</key>
+	<string>Read NFC tags</string>
 </dict>
 </plist>
diff --git a/...t-native/example/ios/LibportalReactNativeExample/LibportalReactNativeExample.entitlements b/...t-native/example/ios/LibportalReactNativeExample/LibportalReactNativeExample.entitlements
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.developer.nfc.readersession.formats</key>
+	<array>
+		<string>TAG</string>
+	</array>
+</dict>
+</plist>
diff --git a/sdk/libportal-react-native/example/src/App.tsx b/sdk/libportal-react-native/example/src/App.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
+import { Platform, View, Button, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import NfcManager, { NfcTech } from 'react-native-nfc-manager';
 import { PortalSdk, type NfcOut, type CardStatus } from 'libportal-react-native';
 
 const sdk = new PortalSdk(true);
+let paused = false;
 
 function livenessCheck(): Promise<NfcOut> {
   return new Promise((_resolve, reject) => {
@@ -22,38 +23,68 @@ function livenessCheck(): Promise<NfcOut> {
 
 async function manageTag() {
   await sdk.newTag();
-  const check = livenessCheck();
+  const check = Platform.select({
+    ios: () => new Promise(() => {}),
+    android: () => livenessCheck(),
+  })();
 
   while (true) {
     const msg = await Promise.race([sdk.poll(), check]);
     // console.trace('>', msg.data);
-    const result = await NfcManager.nfcAHandler.transceive(msg.data);
-    // console.trace('<', result);
-    await sdk.incomingData(msg.msgIndex, result);
+    if (!paused) {
+      const result = await NfcManager.nfcAHandler.transceive(msg.data);
+      // console.trace('<', result);
+      await sdk.incomingData(msg.msgIndex, result);
+    }
+  }
+}
+
+async function getOneTag() {
+  console.info('Looking for a Portal...');
+  paused = false;
+
+  let restartInterval = null;
+  try {
+    await NfcManager.requestTechnology(NfcTech.NfcA, {});
+
+    if (Platform.OS === 'ios') {
+      restartInterval = setInterval(() => {
+        paused = true;
+        NfcManager.restartTechnologyRequestIOS().then((_) => {
+          paused = false;
+        });
+      }, 17500);
+    }
+
+    await manageTag();
+  } catch (ex) {
+    if (Platform.OS === 'ios') {
+      NfcManager.invalidateSessionWithErrorIOS(ex);
+    }
+    console.warn('Oops!', ex);
+  }
+
+  if (restartInterval) {
+    clearInterval(restartInterval);
   }
+  NfcManager.cancelTechnologyRequest({ delayMsAndroid: 0 });
 }
 
 async function listenForTags() {
   while (true) {
-    console.info('Looking for a Portal...');
-
-    try {
-      await NfcManager.registerTagEvent();
-      await NfcManager.requestTechnology(NfcTech.NfcA, {});
-      await manageTag();
-    } catch (ex) {
-      console.warn('Oops!', ex);
-    } finally {
-      NfcManager.cancelTechnologyRequest({ delayMsAndroid: 0 });
-    }
+    await getOneTag();
   }
 }
 
 NfcManager.isSupported()
   .then((value) => {
     if (value) {
       NfcManager.start();
-      return listenForTags();
+
+      if (Platform.OS === 'android') {
+        return listenForTags();
+      }
+
     } else {
       throw "NFC not supported";
     }
@@ -62,14 +93,29 @@ NfcManager.isSupported()
 function App() {
   const [status, setStatus] = useState<CardStatus | null>(null);
   async function getStatus() {
-    setStatus(await sdk.getStatus())
+    if (Platform.OS === 'ios') {
+      getOneTag();
+    }
+
+    setStatus(await sdk.getStatus());
+
+    if (Platform.OS === 'ios') {
+      NfcManager.cancelTechnologyRequest({ delayMsAndroid: 0 });
+    }
+  }
+
+  function resetStatus() {
+    setStatus(null);
   }
 
   return (
     <View style={styles.wrapper}>
-      <TouchableOpacity onPress={getStatus}>
+      <Button title="getStatus" onPress={getStatus}>
         <Text>getStatus()</Text>
-      </TouchableOpacity>
+      </Button>
+      <Button title="resetStatus" onPress={resetStatus}>
+        <Text>resetStatus()</Text>
+      </Button>
 
       <Text>{ JSON.stringify(status) }</Text>
     </View>
@@ -84,4 +130,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+export default App;