This repository was archived by the owner on Mar 16, 2019. It is now read-only.
This repository was archived by the owner on Mar 16, 2019. It is now read-only.
Not displaying image (even with file://) on Android #574
Description
I'm trying to retrieve the image downloaded via RNFetchBlob on my Android app.
After trying to pull the image within WebView and being unsuccessful (by setting baseUri as suggested here), I thought to test to see if I can within the normal React Native render but cannot render anything.
I'm using the file:// prefix suggested here.
Thanks.
Relevant Packages:
"react": "16.0.0-alpha.12",
"react-native": "0.46.3",
"react-native-fetch-blob": "^0.10.8",
"react-native-permissions": "^1.0.1",
Sample Code:
import React from 'react';
import RNFetchBlob from 'react-native-fetch-blob';
import Permissions from 'react-native-permissions';
import { View, Image, Text, Alert, WebView } from 'react-native';
export default class RegisterScreen extends React.Component {
state = {
file: 'waiting...',
};
componentWillMount() {
Permissions.request('storage')
.then(res => {
if (res !== 'authorized') {
throw Error('not authorized');
}
})
.then(() => {
return RNFetchBlob.config({
fileCache: true,
}).fetch('GET', 'http://wolfiezero.com/uploads/2016/06/gears-692013.jpg');
})
.then(res => {
this.setState({
// only one `/` as `res.path()` will
// have one prefixed.
file: 'file:/' + res.path(),
});
return RNFetchBlob.fs.exists(res.path());
})
.then((exists) => {
if (! exists) {
this.setState({
file: 'errored',
});
throw Error('No file downloaded');
}
})
.catch(error => {
Alert.alert(error.message);
});
}
html(imageFile) {
const sourceAbsolute = imageFile;
const sourceRelative = imageFile.replace('file:/' + RNFetchBlob.fs.dirs.DocumentDir, '.');
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body{
background: #c09;
}
</style>
</head>
<body>
<h1>WebView Absolute</h1>
<img src="${sourceAbsolute}" width="100" height="100" />
<p>${sourceAbsolute}</p>
<h1>WebView Relative</h1>
<img src="${sourceRelative}" width="100" height="100" />
<p>${sourceRelative}</p>
</body>
</html>
`;
}
render() {
const html = this.html(this.state.file);
return (
<View style={{ flex: 1 }}>
<View style={{
flex: 0,
}}>
<Text>Image</Text>
<Image source={{ uri: this.state.file, width: 100, height: 100 }} />
<Text>{this.state.file}</Text>
</View>
<WebView source={{
baseUrl: RNFetchBlob.fs.dirs.DocumentDir,
html,
}} style={{
flex: 1,
}} />
</View>
);
}
}Edit: Added WebView test case.