LankyMoose/docs.sheetjs.com
1
Fork 0
forked from sheetjs/docs.sheetjs.com
Code Pull Requests Activity

updated react-native iOS demo; replace react-native-table-component with react-native-tabeller

Browse Source
This commit is contained in:
Asad Karimov 2025-03-08 22:24:13 -05:00
parent 251d39bd39
commit 292fdffb0a
2 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docz/docs/03-demos/17-mobile/01-reactnative.md
View File

@ -244,7 +244,7 @@ This demo was tested in the following environments:
:::caution
First install React Native bt following the CLI Guide![^1]. Make sure you can run a basic test app on your
First install React Native by following the CLI Guide![^1]. Make sure you can run a basic test app on your
phone/simulator before continuing!
:::
@ -319,7 +319,7 @@ scheme is fundamentally different from `react-native`.[^6]
cd SheetJSRNFetch
curl -LO https://docs.sheetjs.com/logo.png
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm i -S react-native-table-component@1.2.2 @types/react-native-table-component`}
npm i -S https://git.sheetjs.com/asadbek064/react-native-tabeller/raw/branch/main/react-native-tabeller-0.1.0.tgz`}
</CodeBlock>
3) Download [`App.tsx`](pathname:///reactnative/App.tsx) and replace:

12
docz/static/reactnative/App.tsx
View File

@ -1,16 +1,10 @@
/* sheetjs (C) SheetJS -- https://sheetjs.com */
import React, { useState, useCallback } from 'react';
import { StyleSheet, Text, Button, Alert, Image, ScrollView, LogBox } from 'react-native';
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
import { StyleSheet, Text, Button, Alert, Image, ScrollView } from 'react-native';
import { Table, Row, Rows, TableWrapper } from 'react-native-tabeller';
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); }); });
@ -66,7 +60,7 @@ function App(): JSX.Element {
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' },
container: { backgroundColor: '#F5FCFF' },
welcome: { fontSize: 20, textAlign: 'center', margin: 10 },
bolded: { textAlign: 'center', color: '#333333', marginBottom: 5, fontWeight: "bold" },
thead: { height: 40, backgroundColor: '#f1f8ff' },