I am facing the problem with gif image in react-native.How to use gif image in react native. This is my code and I have placed the image in the images.js file.
Previously I fixed the issue of gif image displaying in ReactNative.
You too fix this if you follow the following steps,
By default the Gif images are not supported in android react native app. You need to set use Fresco to display the gif images. The code:
Edit your android/app/build.gradle file and add the following code:
dependencies: {
...
compile 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.+'
compile 'com.facebook.fresco:webpsupport:1.+'
}
then you need to bundle the app again, You can display the gif images in two ways like this.
For RN >= 0.60
implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of
implementation 'com.facebook.fresco:animated-gif:2.0.0' //use
1-> <Image
source={require('./../images/load.gif')}
style={{width: 100, height: 100 }}
/>
2-> <Image
source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}
style={{width: 100, height:100 }}
/>
I hope it is helpful to others,
Just like other assets image:
<Image
source={require('./images/loading.gif')}
style={{height: 200, width: 200}}
resizeMode='contain'
/>
Note: You need to turn on GIF support for Android version
use this,
<Image
style={styles.gif}
source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>
make sure to add below dependency,
compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'
for more details refer this ,
StackOverFlow question.
<Image source={require('./img/ezgif.com-resize.gif')} />
//add that inside dependancy block in android/app/build.gradle
compile 'com.facebook.fresco:animated-base-support:1.3.0'
compile 'com.facebook.fresco:animated-gif:1.3.0'
compile 'com.facebook.fresco:animated-webp:1.3.0'
compile 'com.facebook.fresco:webpsupport:1.3.0'
Add that inside dependancy block in android/app/build.gradle
*For me react-native version 0.57.8. It is working for me.
compile 'com.facebook.fresco:animated-gif:1.10.0'
compile 'com.facebook.fresco:fresco:1.10.0'
*
<Image source={{ uri: 'https://media.giphy.com/media/NSI5d5LiHPxXCKDbob/giphy.gif' }}
style={{ height: 80, width: 60, }}
/>
Related
I was using react-native-image-rotate to rotate images but its no longer mantained, any idea what could be a good alternative.
ps: I am not using expo and I am using react-native v0.71.0
I tried react-native-photo-manipulator and other packages but the build fails everytime.
Use transform style properties.
<Image
style={{width: 50, height: 50, transform: [{rotate: '45deg'}]}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
I am trying to display a base64 image from my api but get a white space in place of the image, its work fine on android - any ideas?
<Image
source={{ uri: Images.slider.slider1 }}
PlaceholderContent={<ActivityIndicator />}
style={{width: 100, height: 100}}
/>
Images.slider.slider1:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAFbCAIAAAChzFnkAAAAAXNSR0IArs4c6QAAIABJREFUeJx8vVuyLEmuKwZ6ZPW5pvlPST8y03Skc/tUOvRBAGTkrtZq611rZUb4gw8QpHt41P/5f/3fIC9574V/qqp/IUmAharTnx8CIADUAemL9QsB/QFcgH0BWFWFes6pQqFI9n8Bog5Q3dc551R1U9X9FwAUCuhuusnuDn1joQrFH
this is a known issue in react native 0.62 ,
kindly check this link Github RN .
What basically was done in the PR was :
For anyone else that comes across this just change the version of Flipper in the podfile to
versions['Flipper'] ||= '~> 0.37.0'
do let me know in case of any concerns
The blurRadius property for react native Image component is not working for local files, only remote URIs.
Is this a version problem? I'm using expo sdk 33.
<Image
style={{ width: '100%', height: '100%' }}
source={require('../../../assets/images/home.png')}
blurRadius={1}
resizeMode="contain"
/>
Found a similar question about that but it's not a syntax problem.
It looks like this is a bug in react-native. Try using import instead of requireAsset
import image from '../../../assets/images/home.png'
then render your component using the import
<Image
style={{ width: '100%', height: '100%' }}
source={image}
blurRadius={1}
resizeMode="contain"
/>
Please increase the blurRadius value (1 to 10)
blurRadius={10} <== Magic Code
Here This DocsThis
I'd like to use an iOS launch image as a background image in my React app, but I can't figure out how to reference it. I've tried a few things similar to the following:
<Image source={{uri: "LaunchImage"}} />
But I'm getting this error:
Module `LaunchImage` does not exist in the Haste module map`.
Any ideas?
Please include an image in your project src folder and please call image path using require() like this
<Image source={{uri: require('../Images/LaunchImage.png')}} />
here LaunchImage.png is its file name and 'Images' is the folder name
Try using Image Background tag e.g
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
blurRadius seems to be working on images loaded from remote URIs, but not ones that were loaded from my local assets. Any ideas on why this is?
This can be a version issue or any type of styling error because i have tried blurRadius on many of my local assets and it worked as expected.
Make sure syntax is correct:
<Image
source={require('./image.png')}
style={{ width: 200, height: 200 }}
blurRadius={0.2}
resizeMode='contain'
/>