I'm learning React Native by building an app that takes a picture and shows the image in a gallery.
I'm using react-native-vision to take the photo and react-native-fs to access the temporary file as suggested in this answer and use it as the uri of <Image/>
However, the View that should display a list of </Image> it's showing a blank space
This is my code:
// saves photo on Array and closes the Camera View
const onPressButton = async () => {
console.log(cameraRef.current);
console.log(123);
const photo = await cameraRef.current.takePhoto({
flash: 'off',
qualityPrioritization: 'speed',
});
console.log(photo);
setPhotos([...photos, photo]);
setShowCamera(false);
return;
};
// how I'm trying to render the photos
{photos && photos.length > 0 && (
<View style={{width: '50%', height: '50%'}}>
{photos.map((photo, index) => (
<View key={index}>
{console.log('file://' + DocumentDirectoryPath + photo.path)}
<Image style={{maxWidth: 10, maxHeight: 20}} source={{uri: 'file://' + DocumentDirectoryPath + photo.path}} />
</View>
))}
</View>
)}
This is how it looks:
Is there something wrong with my code?
Thanks for the help.
There are 2 potential errors in your source code.
Photo taken by react-native-vision is chached. (photo.path look something like this: /data/user/0/your.app/cache/mrousavy6472....jpg) So do not use DocumentDirectoryPath, use just source={{uri: 'file://' + photo.path}}
Second potential error is Your photo is not shown because he is hidden from view. Try to set style like this: style={{width: '100%', height: '100%'}}
So in final look like this:
<Image style={{width: '100%', height: '100%'}} source={{uri: 'file://' + photo.path}} />
I am trying to show images fetching from api. and to show images from localhost laravel project. Running my emulator on Genymotion. how do I do that?
Online images are working like fb fevicon. and I am not using the localhost:8000 link for images as I am testing on Genymotion
// URL to fetch apis
export const URL = 'http://10.0.3.2:8000';
// Showing/Displaying my image in React native
if(list && list.length > 0) {
const listAfterPictures = list.map((item, index) =>
<Image
key={ index }
source={{ uri: URL + index.image_name }}
style={{ width: 300, height: 300 }}
/>
);
return (
<View>
{listAfterPictures}
</View>
)
}
I also tried to put width and height in source like:
<Image
key={ index }
source={{ uri: URL + index.image_name, width: 300, height: 300 }}
/>
Any Suggestions?
Please console log URL + index.image_name and check if all back slashes are there. And make sure to include the file extension e.g .jpg .png
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'}
How can I display an animated gif in react native. This is what I've tried.
<Image source={{uri: "loading"}} />
It works fine with a .png file but when I use a .gif file it's blank. I read somewhere to try renaming the .gif to a .png but that just displays one frame of the animated gif with no animation. Any ideas?
For RN < 0.60
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.
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 }}
/>
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
I hope it is helpful to others,
You need to add the extension and require it this way :
<Image source={require('./path/to/image/loading.gif')} />
or
<Image source={{uri: 'http://www.urltogif/image.gif'}} />
For React Native 0.60 and higher
Open your android/app/build.gradle file and add following lines to first of dependencies section
implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'
And then
cd android
gradlew clean
react-native run-android
For me on React native 0.65.1
The solution in react-native docs did not work
I had to use the latest version of Fresco:
implementation 'com.facebook.fresco:animated-gif:2.5.0'
Now GIF works on Android for me.
You can check Fresco latest from their website.
For Android You Need to Add Facebook's Fresco Library
React Native does not come with Gif support out of the box but you can add Facebook's Fresco library to add this support.
You should be able to simply add the following to your build.gradle file:
compile 'com.facebook.fresco:animated-gif:0.+'
Specific Version Compatibility
If you are having troubles or you want to use a static version (highly recommended), you can simply go to the following React Native documentation page and replace the 0.46 in the URL with the version of React Native you're running:
https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android
if you want to use gif as background image than you can use
<ImageBackground
source={yourSourceFile}
>
-- your content ---
</ImageBackground>
To add gif and WebP in your project you need some optional modules. If the RN version is <=0.59 then add the following lines in your android/app/build.gradle file.
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
compile 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.10.0'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
compile 'com.facebook.fresco:webpsupport:1.10.0'
}
If the RN version is 0.60 and greater then add the following lines in android/app/build.gradle file
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.12.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
DylanVann / react-native-fast-image is a nice alternative that supports GIFs for both Android (based on glide rather than fresco) and iOS (SDWebImage) with additional features that looks like:
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://unsplash.it/400/400?image=1',
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)
For react-native": "0.68.2" this version is working for me
implementation 'com.facebook.fresco:animated-gif:2.6.0'
import React,{useState} from 'react';
**step1 import from react narive You Can Use (Image) Or (ImageBackground) **
import { StyleSheet, Text, View ,ImageBackground} from 'react-native';
function LoadingUsers() {
return(<View style={styles.LoadingView}>
**Step 2 require inside source ImageBackground **
<ImageBackground source={require('../assets/stickman.gif')} style={styles.Gif}><Text>Loading..</Text></ImageBackground>
</View>)
}
**Step 3 Set Width ANd height **
const styles = StyleSheet.create({
LoadingView:{
flex:1,
},
Gif:{
flex:1,
width:"100%",
height:"100%",
justifyContent:"center",
alignItems:"center",
backgroundColor:'#000',
}
});
export default LoadingUsers ;
Open project/android/app then build.gradle file and find dependencies and add this line(dependency for .gif)
dependencies {
...
// For GIF image support
implementation 'com.facebook.fresco:animated-gif:2.5.0'
//or implementation 'com.facebook.fresco:animated-gif:2.6.0'
}
then in your react component you can pass any .gif or any gif url like so
const gifUrl = 'https://ipfs.io/ipfs/bafybeic75wkaqvblmte523qkzdoe437onrwl3xgvy5argmh6uhmrn7g2wi'
...
return (
<View>
<Image source={{uri: gifUrl}} style={{width: 200, height: 200}} />
</View>
)
For RN >= 0.66
Edit your android/app/build.gradle file and add the following code:
implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.6.0'
In any case you need something else you could use also WebView for it
render(props) {
const width = 220;
const height = 135;
const borderRadius = 15;
const uri = 'https://c.tenor.com/0wj4ApfUlWUAAAAM/whatever-bank-stare.gif';
// const uri = 'https://c.tenor.com/YwsCGem_MmQAAAAC/parks-and-rec-amy-poehler.gif',;
// const uri = 'https://media.tenor.com/images/1c39f2d94b02d8c9366de265d0fba8a0/tenor.gif';
return (
<View
style={{
width,
height,
borderRadius: 15,
overflow: 'hidden',
}}>
<WebView
source={{
uri
}}
style={{
flex: 1,
width,
height,
borderRadius,
}}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
injectedJavaScript={`
document.body.style.width = "${width}px";
document.body.style.height = "${height}px";
document.body.style.backgroundColor = "${'#fff'}";
document.body.style.overflow = "hidden";
const img = document.querySelector("img");
img.style.position = "absolute";
img.style.top = 0;
img.style.left = 0;
img.style.margin = "auto";
img.style[img.offsetWidth > img.offsetHeight ? 'width' : 'height'] = "100%";
img.style.borderRadius = "${borderRadius}px";
`}
/>
</View>
);
}
It will preserves the gif aspect ratio
Also, I did the same with the <Image />. For anyone need it:
function ChatImageGIF(props) {
const maxWidth = 220;
const maxHeight = 135;
const [width, setWidth] = useState(maxWidth);
const [height, setHeight] = useState(maxHeight);
const borderRadius = 15;
Image.getSize(props.currentMessage.video, (w, h) => {
const minWidth = Math.min(maxWidth, w);
const minHeight = Math.min(maxHeight, h);
const aspectRatio = (w < h ? w : h) / (w < h ? h : w);
setWidth(w < h ? minHeight * aspectRatio : minWidth);
setHeight(w > h ? minWidth * aspectRatio : minHeight);
});
return (
<View
style={{
width,
height,
borderRadius: 15,
overflow: 'hidden',
}}>
<Image
source={{
uri: props.currentMessage.video,
}}
style={{
width,
height,
borderRadius,
resizeMode: 'contain',
}}
/>
</View>
);
}
Does react native support base 64 encoded images?
I tried:
<Image source={{uri: '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='}} style={styles.image}/>
but it didn't work. Am I just doing is wrong or is it not supported?
I think Ramsay is wrong, react native have a fully support on base64 image.
I found this
https://facebook.github.io/react-native/docs/tabbarios.html
this is a official example of how to create a iOS TabBarController, and they use a base64 image as one of the TabBar's icon.
I think you did not specify the width and the height in the style property of the <Image/>.
I tried to use your base64 image in my React Native Playground, and it works.
Usage
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=';
and use in this way
<Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
Yes it is supporting.
Try below
It is tested in iOS and below version
"react": "16.9.0",
"react-native": "0.61.2",
const base64Image = '...';
<Image source={{uri: `data:image/jpeg;base64,${base64Image}`}} />
If still not working. check type of image i.e. jpeg, png etc.
Hope this help :)
<Image
source={{
uri: `data:image/jpeg;base64,${this.state.barcodeImage}`,
}}
style={{height: 200, width: 250}}
/>
notice : add style in image
If you have a problem that the image does not appear, try to save the base64 of the image in a state and then use it
const [base64Image, setBase64Image] = useState<string>(BASE64DATA)
//... your code
<Image
source={{
uri: `data:image/jpg;base64,${base64Image}`
}}
resizeMode="cover"
style={styles.profilePicture}
/>
IMPORTANT: furthemore check if the "jpg" in URI is same that your image extension
<Image
style={{widht:"20" , height:"20%"}}
source={{
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
I don't think this is supported. Unless the URL contains "http" or "https", it's considered a "static" image. Picking through the code, the instantiation of the final image boils down to:
if ([path isAbsolutePath]) {
image = [UIImage imageWithContentsOfFile:path];
} else {
image = [UIImage imageNamed:path];
if (!image) {
image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:path ofType:nil]];
}
}
Step by step:
If the URL is an absolute path, load it as a file
Else if the image is cached (imageNamed), load that
Else if the image is a relative path, load it from the app bundle
Obviously none of that relates to base64. I've created a pull request for this feature which you can view here:
https://github.com/facebook/react-native/pull/576