Good day guys, I need to display a base64 epub string in webview, which actually works for smaller files, but once the file is more than 8mb, I don't get a display.
Someone suggested from this link: https://github.com/victorsoares96/epubjs-react-native/issues/8#issuecomment-1141395428
That I should use debounce lodash, and after finding out about debounce, I notice that its like a timeout delay to search for somethings.
Please how can I apply debounce to my code below to display my base64 epub in webview if the file is quite large?
Please check code below:
viewFile = async (fileUri, title) => {
let file = await FileSystem.readAsStringAsync(fileUri, {
encoding: "base64",
});
this.setState({
base64Code: base64.decode(file),
downloading: false,
});
this.props.navigation.navigate("Views", {
base64Code: this.state.base64Code,
title: title,
});
};
View Below - the code is quite long, but I will put the important parts:
export default class ViewScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
title: this.props.navigation.getParam("title"),
added: false,
base64Code: this.props.navigation.getParam("base64Code"),
};
}
componentWillUnmount() {
this.setState({
base64Code: "",
title: "",
});
}
render() {
const html = `
<html>
<head>
<meta charset="UTF-8">
<script>
book = null;
var b64 = ${JSON.stringify(this.state.base64Code)};
var bin = atob(b64);
var obj = document.createElement('object');
obj.style.width = '100%';
obj.style.height = '842pt';
obj.type = 'application/epub+zip';
obj.data = 'data:application/epub+zip;base64,' + b64;
...
</script>
</body>
</html>`;
return this.state.base64Code !== "" && this.state.base64Code !== null ? (
<View style={{ flex: 1 }}>
<WebView
source={{ html: html }}
javaScriptEnabled={true}
onMessage={(m) => this.onMessage(m)}
/>
</View>
) : (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text style={{ textAlign: "center" }}>
Book Render Error, Please contact administrator at info@wabp.com.ng
</Text>
</View>
);
}
}
Please where do I apply the debounce. I don't quite understand how to go about it.
Thanks
Tim