Develop Reference

React Native WebView only display PDF file in Android

I'm trying to display a pdf file inside a WebView WITHOUT download it (because some security reasons). I'm using react-native-webview.
In iOS, the PDF file is displaying without any problem. But in Android, when navigate to the screen with the webview, starts a download of the pdf file and, is not displayed on the screen.
There is a way to display directly the pdf file on the screen in the case of Android?
Here is my current code:
<WebView
style={styles.webView}
startInLoadingState
renderLoading={() => <LoadingIndicator />}
source={{ uri: document.url }}
/>
Thanks a lot in advance.

React Native: Images from uri not being rendered on Android using String interpolation to hand over token

I am currently working on a React Native App that involves images. I use the following code to display them:
//...
<View key={uriFromArray}>
<Image
style={styles.itemimage}
source={
{
uri: uriFromArray,
headers: {
Authorization: `Bearer ${graphToken}`,
},
}
}
/>
</View>
//...
On iOS, this works totally fine, on Android though, the images are not being rendered, neither on a virtual nor a physical device. Weirdly enough, images are being rendered if I copy the acutal token string to Authorization instead of using String interpolation to hand over the token.
Does anybody have an idea of what could be wrong? Thanks!

Try concatenating string before the component renders like:
const header = `Bearer ${graphToken}`;
Then pass it to Authorization key in the Image uri header prop

React-Native Disable Image Cache on Android

i am trying to use a random image generator for a demo app i am creating.
i have tried the endpoints:
http://thecatapi.com/api/images/get?format=src&type=gif&size=small
http://junglebiscuit.com/images/random/rand_image.pl
but when i add a list of images to my page with:
<View>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
</View>
the expectation is that for each Image component, a different image would be displayed. strangly, this does not work on Android. it seems that the image or url is being cached somewhere so when the image is rendered again with the same URI, the same image is displayed.
i have tried the same application on IOS (the app is created using react native expo.io). the image are different as expected on IOS, it it seems to be a problem specific to Android.
is there a way to prevent android from cacheing the image and display a different image every time the Image component is rendered?

In 2020 it`s still an issue in react native (as Dishant Walia mentioned). Now best solution from github is:
add a query string after url, works for both platform
<Image
style={styles.drawerAccountImg}
source={uri: this.state.photoURL + '?' + new Date()}
/>

Somehow you have to add random string to reload image with same uri. I have fixed the same issue by adding random string in image url.
Follow this comment for more information
React native image issue

How to display the image preview in react native app?

may I know how to display the image preview in React Native app? In iOS I was able to display if it is a http url but in the Android platform I cannot view the image as shown in the screenshot below:
The Running React Native App in Android:
The Image Preview in iOS platform:
In the code the attachment field is equal to this.state.attachment so can see the http url but when I connect it with the Image the image preview is blank. However if I hard code the exact http url address in iOS it can show the image.
//in iOS this one can show the image but Android cannot
let Image_Http_URL = { uri : 'http://localhost:3000/api/containers/container/download/FMS-SiteIcon_v2.jpg'};
//this one is both cannot but in url can show the http url address
let Image_Http_URL = { uri : 'this.state.attachment' };
<Image
style={{width: 200, height: 200}}
source={Image_Http_URL}
/>
<FloatLabelTextInput
onChangeText={(attachment) => {
this.setState({attachment})
}}
value={this.state.attachment}
editable={false}
placeholder="Attachment"
style={styles.input}/>
Please help and thanks.

this.state.attachment should not be enclosed in a string, try { uri : this.state.attachment }; or { uri : {this.state.attachment} };

React Native LruCache: Does it cache images from image urls

Basically, I am making an API call to get some kind of response back. In this response, there is some field like socialImageUrl that points to a URL string that references an image. There is other data there besides the URL. I am caching that entire response.
So I turn off wifi and LTE, and I checked that I had no internet connection by doing stuff on the browser. I go back into my app and I trigger my LruCache and retrieved the cached response (I know I got it because of logging) and I use that response to render my page.
What I expected: I would see all the data that I cached on the page but anything that used the image URLs will give out some erroneous image or maybe the page doesn't even load at all because there is some error with that image URL seeing as it can't access the internet
What actually happens: I see all of the data I cached and I also see the images
Any clue to what is going on? I'm not doing any image caching as far as I know. I am using react-native's vanilla Image JSX component. I am also on Android.

I was also in this situation ones, sadly React-Native docs are not extensive for now.
The Android implementation of Image component has by default caching enabled for images of low size < 500 KB (the max size is not documented but you can just try images of varied size to check and this size could change in the future).
Note: Even in IOS the image's will be cached by default when using the Image component.

If I had to guess, lru cache does not support caching binary data like an image file.
If you need advanced <Image> performance caching or for the remote image to be permanently stored to local disk for offline app use you can use my higher order component module that upgrades native <Image>
React Native Image Cache HOC
Tl;DR Code Example:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
<CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
</View>
);
}
}
The first image will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.
The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app, but you could use it so that your app displays image content even when user is offline.
If you need to grab all the image files from the network up front (before the <CacheableImage> is rendered by react native) then just use the following CacheableImage static method to pre-fetch the files:
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true)
.then( localFileInfo => {
console.log(localFileInfo);
// Console log outputs:
//{
// url: 'https://i.redd.it/rc29s4bz61uz.png',
// cacheType: 'permanent',
// localFilePath: '/this/is/absolute/path/to/file.jpg'
//}
});