import React, { useState, type FC } from 'react'; import { SafeAreaView, ScrollView, StyleSheet, Text, TouchableHighlight, View, Alert } from 'react-native'; import { read, utils, version } from 'xlsx'; import { getEnforcing } from 'react-native/Libraries/TurboModule/TurboModuleRegistry'; const DocumentPicker = getEnforcing('DocumentPicker'); const App: FC = () => { const [ aoa, setAoA ] = useState(["SheetJS".split(""), "5433795".split("")]); const max_cols = aoa.reduce((acc,row) => Math.max(acc,row.length),1); return ( <SafeAreaView style={styles.outer}> <Text style={styles.title}>SheetJS × React Native MacOS {version}</Text> <TouchableHighlight onPress={async() => { try { const b64 = await DocumentPicker.PickAndRead(); const wb = read(b64); setAoA(utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { header: 1 } )); } catch(err) { Alert.alert(`Read Error`, `${err instanceof Error ? err.message : err}`); } }}><Text style={styles.button}>Click here to Open File!</Text></TouchableHighlight> <ScrollView contentInsetAdjustmentBehavior="automatic"> <View style={styles.table}>{Array.from({length: aoa.length}, (_, R) => ( <View style={styles.row} key={R}>{Array.from({length: max_cols}, (_, C) => ( <View style={styles.cell} key={C}><Text>{String(aoa?.[R]?.[C]??"")}</Text></View> ))}</View> ))}</View> </ScrollView> </SafeAreaView> ); }; const styles = StyleSheet.create({ cell: { flex: 4 }, row: { flexDirection: 'row', justifyContent: 'space-evenly', padding: 10, backgroundColor: 'white', }, table: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }, outer: { marginTop: 32, paddingHorizontal: 24, }, title: { fontSize: 24, fontWeight: '600', }, button: { marginTop: 8, fontSize: 18, fontWeight: '400', }, }); export default App;