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}} />
Related
So i am currently making a messaging application and this needs to be able to live messages, I am using a flat list to display these items and everytime i append an item to the messageFetch it takes ages for the flat list to load, (at any time there could be 100's to 1000's of items in the list). How can I speed this up? Also the components are of diffrent sizes.
flatlist component:
<View style={styles.container}>
<View style={styles.topBar} focusable>
<Text style={{ fontFamily: "Roboto-Regular", fontSize: 17, color: "white" }}>{name}</Text>
</View>
<View style={styles.mainChat} focusable>
<View style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]}>
<ActivityIndicator style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]} />
</View>
<FlatList
inverted
ref={list}
data={messageFetch.reverse()}
renderItem={Message}
keyExtractor={(item) => item.index}
/>
</View>
</View>
loadedFinished only runs once and stops at about 3 seconds.
Message Component:
function Message({ item }) {
if (item.embed.type != undefined) {
return <Text>hello<Text>
}
return (
<View style={[mesgStyles.mainMessage, { flexDirection: item.original ? "row-reverse" : "row" }]}>
<Image style={mesgStyles.userPfp} resizeMode="contain" source={{ uri: item.pfp }}></Image>
<View style={mesgStyles.spacer} />
<View style={mesgStyles.messageBody}>
<Text style={mesgStyles.mainText}>{item.text}</Text>
</View>
</View>
);
}
Any help would be greatly appreciated. Thanks
I'm having issues writing an If statement in React Native.
I'm building the mobile version of my React Js project where I already have the "if" statement but I'm not being able to write it in Native.
Here is what I got so far:
{renderItems && (
<FlatList
data={data}
keyExtractor={(item)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item})=>(
#######################################
if (item.copyright "exists" return (
<Image source(require(a specific local image)/>
else( return the code below
#######################################
<View style={styles.viewpic}>
<TouchableOpacity onPress={() => navigation.navigate('ImageDetails',
item)}>
<Image
style={{
height: 104,
width: square - 20,
margin: 10,
borderWidth: 1,
borderColor:'white',
borderRadius:2,
}}
source={{uri:item.url}}/>
</TouchableOpacity>
</View>
)}
/>)
}
the code works fine without the if part. I tried a few combos with "{" ,"(" ,"({" but nothing worked.
Thanks everyone for your help!
Cheers,
here
{renderItems &&
<FlatList
data={data}
keyExtractor={(item)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item})=>(
item.copyright== "exists" ?
<Image source(require(a specific local image)/>
:<View style={styles.viewpic}>
<TouchableOpacity onPress={() => navigation.navigate('ImageDetails', item)}>
<Image style={{
height: 104,
width: square - 20,
margin: 10,
borderWidth: 1,
borderColor:'white',
borderRadius:2,
}}
source={{uri:item.url}}/>
</TouchableOpacity>
</View>)}
/>
}
Yes, there seem to be some missing brackets. I would create a separate function like check() for the if statements and let it return the JSX elements instead:
const check = (item) => {
if (item.copyright === "exists") {
return (
<Image source={require('a specific local image')}/>
)
}
else {
return (
<View style={styles.viewpic}>
<TouchableOpacity onPress={() => navigation.navigate('ImageDetails', item)}>
<Image style={{
height: 104,
width: square - 20,
margin: 10,
borderWidth: 1,
borderColor:'white',
borderRadius:2,
}}
source={{uri:item.url}}
/>
</TouchableOpacity>
</View>
)
}
}
{renderItems && (
<FlatList
data={data}
keyExtractor={(item)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item})=>(
check(item)
)}
/>
)}
If you do not want a separate function you have to write the function in the Flatlist's renderItem a little bit different:
<FlatList
data={data}
keyExtractor={(item)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item})=> {
if (item.copyright === "exists") {
return (
<Component1/>
)
}
else {
return (
<Component2/>
)
}
}
}
/>
But still check for the brackets. They should all be correct in the first code snippet though.
Here is my code
return (
<ScrollView>
<View style={{ padding: 10, flex: 1 }}>
{listing.map((listing) => (
<>
<View style={styles.containerOne} key={listing.snome_id}>
<View
id="listing"
style={styles.containerTwo}
>
<Text style={{ margin: 15, marginTop: 20 }}>
{listing.header}
</Text>
{listing.url.map((url) => (
<Image style={styles.pic} source={{ uri: url }} />
))}
<Text style={{ margin: 15, marginTop: 20 }}>
{' '}
{listing.description}
</Text>
</View>
</View>
</>
))}
</View>
</ScrollView>
);
I am trying to view multiple listings and the corresponding image and some text. It seems even though I am using a key prop in the view component it is still throwing error to me and I am not sure about the reason behind that.
I hope that somebody can help me to resolve this issue.
The key always needs to be given to the top-level component created by the map function. In your code, that's the Fragment. You'll need to replace this:
<>
<View style={styles.containerOne} key={listing.snome_id}>
...
</>
With this:
<React.Fragment key={listing.snome_id}>
<View style={styles.containerOne}>
...
</React.Fragment>
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 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>