I'm creating this Instagram Clone, I have the image local url and I want to show it to the user before he posts it.
I tried to crate a state var, tried to require but nothing works
<Image source={this.state.img_url} />
This is what I need, thanks for helping me!
Here is the solution I found
render(){
//Getting image from Camera Screen
var imgSource = this.state.img_url;
return(
<View>
<Image
source={{ uri: imgSource }}
style={{width: 400, height: 400}}
/>
</View>
);
}
For showing image in react-native, you need to provide an object which contains uri property.
Below code will set a responsive image
<View>
<Image source={{ uri: 'image-path' }} style={{ height: 300, flex: 1, width: null }}>
</View>
Related
I'm trying to add an image in the background of a screen which is very long and I want the image to be scrollable. Please give suggestions/code snippets for me to achieve this.
Just put the image inside a ScrollView like this
export default function App() {
return (
<>
<ScrollView >
<ImageBackground
style={{
height: 1000,
width: '100%',
}}
source={{
uri: 'https://i.stack.imgur.com/zkNF4.jpg',
}}
/>
</ScrollView>
</>
);
}
Let me know if it worked
My Data Look Like This
["https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg"]
Now I want To Show These 4 images in row
I am Mapping Like this
{Data.CompanyImages.map((item) => {
<View style={{flexDirection: 'row'}}>
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
</View>;
})}
but its not showing anything please help
Open any image of your list in the browser, you can see that there is an error returned, please make sure you set the images to public access in your S3 or adjust your code to pass some params to indicate that the access to those images is valid and the S3 return the content
Check Your image link
<Error>
<Code>PermanentRedirect</Code>
<Message>The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.</Message>
<Endpoint>s3.amazonaws.com</Endpoint>
<Bucket>files-bucket</Bucket>
<RequestId>Z72TT83DFD04M8EJ</RequestId>
<HostId>AMuc/KSYXayYgzkigho3CTqNluTLEDAI/EYUug3U4NKsJB8xbnJSDsFn8VlaNZ50N73EAWhi2p0=</HostId>
</Error>
Considering your Data is valid and Data.CompanyImages is the array you have shown in your question, then I see two problems in your code.
You have to return the JSX from your map function.
Wrap the map function with a View with flexDirection = row
Change your map to,
<View style={{flexDirection: 'row'}}> // wrap list with flexDirection row
{Data.CompanyImages.map((item) => ( //returning JSX with ()
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
))}
</View>
I have a react-native app where I am looping through array that contains urls of some images on my API server.
The problem is these images are not showing on the device.
Here is the code:
<View style={{...styles.menuList}}>
{menus && (
menus.map((menu) => {
return (
<TouchableNativeFeedback
onPress={() => {
AsyncStorage.getItem('hideMenuModal').then((value) => {
if (value) {
setShowMenuChoice(true);
} else {
setMenuModalVisible(true);
}
});
addSelectedMenu(menu.name);
}}>
<View style={styles.menuItem}>
<View style={styles.menuImageContainer}>
{console.log('Image-url:', menu.image.url)}
<Image source={{ uri: menu.image.url }} style={{ width: 32, height: 32 }}/>
</View>
<Text style={[styles.menuText, {color: theme.baseText}]}>
{menu.name}
</Text>
</View>
</TouchableNativeFeedback>
)
})
)}
<View/>
Also, when I log the url it display normally so the problem is not there. and If I try to open the image in browser it also open. So, I don't know why its not working.
I appreciate your help everyone. Have a nice day
So you are printing menu.image.url, but setting the image source as imageSource.
{console.log('Image-url:', menu.image.url)}
<Image source={imageUrl} style={{ width: 32, height: 32 }}/>
The following will fix the problem.
<Image source={menu.image.url} style={{width:32,height:32}} />
Please I have Card which will display data from my database, the problem its not displaying the image, but it displays the rest of the data.
<FlatList
data={getListingsApi.data}
keyExtractor={(listing) => listing.id.toString()}
renderItem={({ item }) => (
<Card
title={item.title}
subtitle={"₦" + item.price}
date={item.date_of_event}
imageUrl={item.photo}
category={item.category}
onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
/>
This is the image url of how it displays on when i log it -
"photo": "http://127.0.0.1:8000/media/posts/n3.jpg",
Card Component:
function Card({ title, subtitle, date, category, imageUrl, onPress }) {
return (
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.card}>
<Image
style={styles.image}
tint="light"
preview={{ uri: imageUrl }}
uri={imageUrl}
/>
{/* <Image style={styles.image} source={image} /> */}
<View style={styles.detailContainer}>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subtitle}>{subtitle}</AppText>
<AppText style={styles.subtitle}>{date}</AppText>
<AppText style={styles.subtitle}>{category}</AppText>
</View>
</View>
</TouchableWithoutFeedback>
);
}
If you're using android emulator you have to use 10.0.2.2 to access localhost on your PC. and if you're using a real device then you need to be on the same wifi network and have to use your PC's ip instead of localhost
But still there is multiple tricks for show image from various source.
Image show From project's assets folder :
<Image
source={{ uri: 'asset:/app_icon.png' }}
style={{ width: 40, height: 40 }}
/>
Image show from network :
<Image source={{uri: 'https://reactjs.org/logo-og.png'}}
style={{width: 400, height: 400}} />
From base64 Image data :
<Image style={{
width: 51,
height: 51,
resizeMode: 'contain'
}}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='
}}
/>
More Information about image is on this link : React native Image
I'm using an S3 bucket as origin for my app's images. Storage.get seems to be working fine, as when I copy and paste the link on the browser, it loads the image correctly. However, the Image tag seems not to be working...
It seems to load the image correctly, as it shows its space in the app, but it doesn't show the actual image.
Here is the code:
render() {
return(
<View style={Styles.vContainerF}>
{ this.state.gmpLogoURL ?
<Image style={{flex:1}}
resizeMode='contain'
source={{uri: this.state.gmpLogoURL }}
/>
: null }
This is the view style config:
vContainerF: {
flex: 1,
padding: 10,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
Any hints on what could be the issue?
Thanks in advance folks!
As described in react-native image doc :
Note that for network and data images, you will need to manually specify the dimensions of your image!
So add height and width to your image style :
<Image
style={{ flex: 1, height: 100, width: 100 }}
resizeMode='contain'
source={{ uri: this.state.gmpLogoURL }}
/>