Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
87143327fa |
27
README.md
27
README.md
@ -2,23 +2,11 @@
|
||||
|
||||
Complete Reproduction of <https://docs.sheetjs.com/docs/demos/mobile/reactnative#demo>
|
||||
|
||||
The demo showcases a number of plugins. They are in different branches:
|
||||
This branch (`RNFB`) demonstrates `rn-fetch-blob`.
|
||||
|
||||
- ["RNBU" for `react-native-blob-util`](https://git.sheetjs.com/sheetjs/sheetjs-rn/src/branch/RNBU)
|
||||
- ["RNFA" for `react-native-file-access`](https://git.sheetjs.com/sheetjs/sheetjs-rn/src/branch/RNFA)
|
||||
- ["RNFB" for `rn-fetch-blob`](https://git.sheetjs.com/sheetjs/sheetjs-rn/src/branch/RNFB)
|
||||
- ["RNFS" for `react-native-fs`](https://git.sheetjs.com/sheetjs/sheetjs-rn/src/branch/RNFS)
|
||||
- ["EXPO" for `expo-file-system`](https://git.sheetjs.com/sheetjs/sheetjs-rn/src/branch/EXPO)
|
||||
## Installation
|
||||
|
||||
To test a particular branch:
|
||||
|
||||
1) Switch to the particular branch. For example, to switch to RNBU:
|
||||
|
||||
```bash
|
||||
git checkout RNBU
|
||||
```
|
||||
|
||||
2) Build dependencies:
|
||||
1) Install dependencies:
|
||||
|
||||
```bash
|
||||
npm i
|
||||
@ -26,13 +14,13 @@ npm i
|
||||
|
||||
### iOS
|
||||
|
||||
3) (iOS only) link iOS project
|
||||
2) (iOS only) link iOS project
|
||||
|
||||
```bash
|
||||
cd ios; pod install; cd ..
|
||||
```
|
||||
|
||||
4) run the development process:
|
||||
3) run the development process:
|
||||
|
||||
```bash
|
||||
npx react-native run-ios
|
||||
@ -40,11 +28,10 @@ npx react-native run-ios
|
||||
|
||||
### Android
|
||||
|
||||
5) ensure Java 11 is the current version
|
||||
4) ensure Java 11 is the current version
|
||||
|
||||
6) run the development process:
|
||||
5) run the development process:
|
||||
|
||||
```bash
|
||||
npx react-native run-android
|
||||
```
|
||||
|
||||
|
21
index.js
21
index.js
@ -4,6 +4,27 @@ import React, { Component } from 'react';
|
||||
import { AppRegistry, StyleSheet, Text, Button, Alert, Image, ScrollView } from 'react-native';
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
|
||||
|
||||
import { read, write } from 'xlsx';
|
||||
import { pickSingle } from 'react-native-document-picker';
|
||||
import { Platform } from 'react-native';
|
||||
import RNFetchBlob from 'rn-fetch-blob';
|
||||
|
||||
async function pickAndParse() {
|
||||
const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" });
|
||||
let path = f.fileCopyUri;
|
||||
if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/");
|
||||
const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72
|
||||
// const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72
|
||||
return read(new Uint8Array(res), {type: 'buffer'});
|
||||
}
|
||||
|
||||
async function writeWorkbook(wb) {
|
||||
const wbout = write(wb, {type:'buffer', bookType:"xlsx"});
|
||||
const file = RNFetchBlob.fs.dirs.DocumentDir + "/sheetjsw.xlsx";
|
||||
await RNFetchBlob.fs.writeFile(file, Array.from(wbout), 'ascii');
|
||||
return file;
|
||||
}
|
||||
|
||||
const make_width = ws => {
|
||||
const aoa = utils.sheet_to_json(ws, {header:1}), res = [];
|
||||
aoa.forEach((r) => { r.forEach((c, C) => { res[C] = Math.max(res[C]||60, String(c).length * 10); }); });
|
||||
|
@ -374,7 +374,7 @@ PODS:
|
||||
- React-jsinspector (0.72.1)
|
||||
- React-logger (0.72.1):
|
||||
- glog
|
||||
- react-native-document-picker (8.2.0):
|
||||
- react-native-document-picker (8.2.1):
|
||||
- React-Core
|
||||
- React-NativeModulesApple (0.72.1):
|
||||
- hermes-engine
|
||||
@ -486,6 +486,8 @@ PODS:
|
||||
- React-jsi (= 0.72.1)
|
||||
- React-logger (= 0.72.1)
|
||||
- React-perflogger (= 0.72.1)
|
||||
- rn-fetch-blob (0.12.0):
|
||||
- React-Core
|
||||
- SocketRocket (0.6.1)
|
||||
- Yoga (1.14.0)
|
||||
- YogaKit (1.18.1):
|
||||
@ -555,6 +557,7 @@ DEPENDENCIES:
|
||||
- React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
|
||||
- React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
|
||||
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
|
||||
- rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
|
||||
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
|
||||
|
||||
SPEC REPOS:
|
||||
@ -654,6 +657,8 @@ EXTERNAL SOURCES:
|
||||
:path: "../node_modules/react-native/ReactCommon/react/utils"
|
||||
ReactCommon:
|
||||
:path: "../node_modules/react-native/ReactCommon"
|
||||
rn-fetch-blob:
|
||||
:path: "../node_modules/rn-fetch-blob"
|
||||
Yoga:
|
||||
:path: "../node_modules/react-native/ReactCommon/yoga"
|
||||
|
||||
@ -691,7 +696,7 @@ SPEC CHECKSUMS:
|
||||
React-jsiexecutor: 184eae1ecdedc7a083194bd9ff809c93f08fd34c
|
||||
React-jsinspector: d0b5bfd1085599265f4212034321e829bdf83cc0
|
||||
React-logger: b8103c9b04e707b50cdd2b1aeb382483900cbb37
|
||||
react-native-document-picker: 495c444c0c773c6e83a5d91165890ecb1c0a399a
|
||||
react-native-document-picker: 69ca2094d8780cfc1e7e613894d15290fdc54bba
|
||||
React-NativeModulesApple: 4f31a812364443cee6ef768d256c594ad3b20f53
|
||||
React-perflogger: 3d501f34c8d4b10cb75f348e43591765788525ad
|
||||
React-RCTActionSheet: f5335572c979198c0c3daff67b07bd1ad8370c1d
|
||||
@ -709,6 +714,7 @@ SPEC CHECKSUMS:
|
||||
React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd
|
||||
React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
|
||||
ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
|
||||
rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
|
||||
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
|
||||
Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009
|
||||
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
|
||||
|
@ -14,6 +14,7 @@
|
||||
"react-native": "0.72.1",
|
||||
"react-native-document-picker": "^8.2.0",
|
||||
"react-native-table-component": "^1.2.0",
|
||||
"rn-fetch-blob": "^0.12.0",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
Loading…
Reference in New Issue
Block a user