Description
const blob = new Blob(["sheetjs"]);
const slice = blob.slice(blob.size - 1, blob.size + 2);
console.log(slice.size);
In the web platform, Blob#slice caps endpoint to the blob size. When run in Chromium, the code snippet prints 1.
RN (both android and iOS) creates a slice with size 3.
FileReader methods appear to treat the extra bytes as zero:
const f = new FileReader();
f.readAsDataURL(slice); // f.result has encoded "cwAA" -> [0x73, 0x00, 0x00];
Version
0.70.6
Output of npx react-native info
n/a (issue is reproducible in Expo Snack)
Steps to reproduce
- create new project:
npx react-native init RNBlobIssue --version="0.70.6"
cd RNBlobIssue
- replace App.js with
import * as React from 'react';
import { Text, View, Button } from 'react-native';
export default function App() {
const [message, setMsg] = React.useState("waiting ...")
const doit = async () => {
try {
let blob = new Blob(["sheetjs"]);
setMsg(`blob size ${blob.size}`)
let slice = blob.slice(blob.size - 1, blob.size + 2);
setMsg(`blob size ${blob.size}, slice size ${slice.size}`)
} catch(e) { setMsg(`${e}`)}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{message}</Text>
<Button title="Click me" onPress={doit} />
</View>
);
}
- run simulator. Issue affects both Android and iOS, so either command works:
npm run ios ## run iOS simulator
npm run android ## run android simulator
- once simulator is running, click "Click me" button and the body text will change.
If RN is consistent with the web platform, the text should be blob size 7, slice size 1
Snack, code example, screenshot, or link to a repository
(same code as above):
import * as React from 'react';
import { Text, View, Button } from 'react-native';
export default function App() {
const [message, setMsg] = React.useState("waiting ...")
const doit = async () => {
try {
let blob = new Blob(["sheetjs"]);
setMsg(`blob size ${blob.size}`)
let slice = blob.slice(blob.size - 1, blob.size + 2);
setMsg(`blob size ${blob.size}, slice size ${slice.size}`)
} catch(e) { setMsg(`${e}`)}
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{message}</Text>
<Button title="Click me" onPress={doit} />
</View>
);
}If RN is consistent with the web platform, the text should be blob size 7, slice size 1
Android:
iOS:
Description
In the web platform,
Blob#slicecaps endpoint to the blob size. When run in Chromium, the code snippet prints1.RN (both android and iOS) creates a slice with size
3.FileReadermethods appear to treat the extra bytes as zero:Version
0.70.6
Output of
npx react-native infon/a (issue is reproducible in Expo Snack)
Steps to reproduce
If RN is consistent with the web platform, the text should be
blob size 7, slice size 1Snack, code example, screenshot, or link to a repository
(same code as above):
If RN is consistent with the web platform, the text should be
blob size 7, slice size 1Android:
iOS: