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',
}}
/>
Related
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 want to use in PixelRatio in react-native but not sure where I insert my image path.
in react native docs , I don't see any mention about the path of the image when using in pixelRatio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
the source here is the image dimension, but assume i have url, where to write it?
in Image docs of react, I have to write it instead of the source e.g
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
so what the right way to do when I use PixelRatio?
The Image.source prop is a plain object descriptor that takes properties uri, width and height (among other image source types, such as embedded assets).
You should be able to construct the image source yourself:
const image = {
uri: 'https://facebook.github.io/react/img/logo_og.png',
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100)
};
return <Image source={image} />
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, }}
/>
In my React Native project folder I have the src files which hold the components, and also some images I want to use across both iOS and Android. If I use this:
<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />
then the image loads perfectly. However, the source in the image tag is going to be created dynamically when the user takes a photo. This code:
<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />
does not work. No errors thrown, but no image displayed. I'm sure I'm on the right track as it will return images taken by the camera and stored on the device using the same code when I replace the source with a prop (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) but for the static image it's not happening. Suggestions?
For the static images you need to specify like below source
source={require('static_image_path_relative_current_directory')
Only for remote and local files(not static) we need to specify uri in source like below
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}
And here is the code I'm running. It loads fine if I use a image path.
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
<Image source={{uri: base64Icon}} style={styles.thumbnail}/>
first, looks right, double check that you're string is valid base64? when I tried to decode, I got an error. could be the tool though.
and you need to set with and height of the image. since you didn't show your styles, not sure if you've done so.
this should work...
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';
<Image
style={{width: 100, height: 50,
resizeMode: 'contain',
borderWidth: 1,
borderColor: 'red'}}
source={{uri: base64Icon}}
/>
ref SOF for more info