From 251d39bd39baabb01b19d4e99f7b355727af5610 Mon Sep 17 00:00:00 2001
From: Asad <contact@asadk.dev>
Date: Sat, 8 Mar 2025 11:55:39 -0500
Subject: [PATCH] update and retest fetching remote data demo in react native

App.tsx demo updated:
`react-native-table-component` no longer maintained and was erroring out typed errors
updated App.tsx to supress the type error.
---
 .../docs/03-demos/17-mobile/01-reactnative.md | 23 +++++++++-
 docz/static/reactnative/App.tsx               | 42 +++++++++++--------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/docz/docs/03-demos/17-mobile/01-reactnative.md b/docz/docs/03-demos/17-mobile/01-reactnative.md
index b6db0e4..580e638 100644
--- a/docz/docs/03-demos/17-mobile/01-reactnative.md
+++ b/docz/docs/03-demos/17-mobile/01-reactnative.md
@@ -236,12 +236,19 @@ This demo was tested in the following environments:
 | Android 34 | Pixel 3a            | `0.76.5` | `darwin-x64` | 2024-12-31 |
 | iOS 18.2   | iPhone 16 Pro       | `0.76.5` | `darwin-x64` | 2024-12-31 |
 | Android 34 | Pixel 3a            | `0.76.5` | `darwin-arm` | 2025-01-05 |
-| iOS 18.2   | iPhone 16 Pro       | `0.76.5` | `darwin-arm` | 2025-01-05 |
+| iOS 18.3   | iPhone 16 Pro       | `0.76.5` | `darwin-arm` | 2025-03-08 |
 | Android 35 | Pixel 9             | `0.76.5` | `win11-x64`  | 2024-12-22 |
 | Android 35 | Pixel 9             | `0.76.5` | `linux-x64`  | 2025-01-02 |
 
 :::
 
+:::caution
+
+First install React Native bt following the CLI Guide![^1]. Make sure you can run a basic test app on your
+phone/simulator before continuing!
+
+:::
+
 0) Install React Native dependencies
 
 <details>
@@ -284,6 +291,20 @@ On macOS, if prompted to install `CocoaPods`, press <kbd>Y</kbd>
 
 :::info pass
 
+If you were prompted to install CocoaPods, verify it worked by opening a new terminal and running:
+
+```bash
+pod --version
+```
+
+If you see "command not found", install it via `brew`:
+
+```bash
+brew install cocoapods
+```
+
+--- 
+
 Older versions of this demo used the `react-native` package. The `init` command
 was officially deprecated.
 
diff --git a/docz/static/reactnative/App.tsx b/docz/static/reactnative/App.tsx
index cefcaae..3bc2090 100644
--- a/docz/static/reactnative/App.tsx
+++ b/docz/static/reactnative/App.tsx
@@ -1,10 +1,16 @@
 /* sheetjs (C) SheetJS -- https://sheetjs.com */
 
 import React, { useState, useCallback } from 'react';
-import { StyleSheet, Text, Button, Alert, Image, ScrollView } from 'react-native';
+import { StyleSheet, Text, Button, Alert, Image, ScrollView, LogBox } from 'react-native';
 import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
 import { read, utils, WorkSheet } from 'xlsx';
 
+// suppress react-native-table-component type - no longer maintained
+// TODO: rewrite this demo; works for now
+LogBox.ignoreLogs([
+  'Invalid prop `textStyle` of type `array` supplied to `Cell`',
+]);
+
 const make_width = (ws: WorkSheet): number[] => {
   const aoa = utils.sheet_to_json(ws, {header:1}), res: number[] = [];
   aoa.forEach((r) => { r.forEach((c, C) => { res[C] = Math.max(res[C]||60, String(c).length * 10); }); });
@@ -38,24 +44,24 @@ function App(): JSX.Element {
   }, []);
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <Text style={styles.welcome}> </Text>
-      <Text style={styles.welcome}> <Image source={require("./logo.png")} style={styles.image}/> &nbsp; SheetJS × React Native</Text>
-      <Button onPress={importFile} title="Import data from a spreadsheet" color="#841584" />
-      <Text style={styles.bolded}>Current Data</Text>
-      <ScrollView style={styles.table} horizontal={true} >
-        <Table style={styles.table}>
-          <TableWrapper>
-            <Row data={data[0]} style={styles.thead} textStyle={styles.text} widthArr={widths}/>
-          </TableWrapper>
-          <ScrollView>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.welcome}> </Text>
+        <Text style={styles.welcome}> <Image source={require("./logo.png")} style={styles.image}/> &nbsp; SheetJS × React Native</Text>
+        <Button onPress={importFile} title="Import data from a spreadsheet" color="#841584" />
+        <Text style={styles.bolded}>Current Data</Text>
+        <ScrollView style={styles.table} horizontal={true} >
+          <Table style={styles.table}>
             <TableWrapper>
-              <Rows data={data.slice(1)} style={styles.tr} textStyle={styles.text} widthArr={widths}/>
+              <Row data={data[0]} style={styles.thead} textStyle={styles.text} widthArr={widths}/>
             </TableWrapper>
-          </ScrollView>
-        </Table>
+            <ScrollView>
+              <TableWrapper>
+                <Rows data={data.slice(1)} style={styles.tr} textStyle={styles.text} widthArr={widths}/>
+              </TableWrapper>
+            </ScrollView>
+          </Table>
+        </ScrollView>
       </ScrollView>
-    </ScrollView>
   );
 }
 
@@ -65,9 +71,9 @@ const styles = StyleSheet.create({
   bolded: { textAlign: 'center', color: '#333333', marginBottom: 5, fontWeight: "bold" },
   thead: { height: 40, backgroundColor: '#f1f8ff' },
   tr: { height: 30 },
-  text: { marginLeft: 5, },
+  text: { marginLeft: 5 },
   table: { width: "100%" },
   image: { height: 16, width: 16 }
 });
 
-export default App;
+export default App;
\ No newline at end of file