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
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
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>
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}} />
const Sell = ({navigation}) => { // sell page, user will be able to sell their OWNED foods.
let [visible, setVisible] = useState(false);
const [image, setImage] = useState(null);
const toggleOverlay = () => {
setVisible(!visible);
}
let openImagePickerAsync = async () => {
let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
let pickerResult = await ImagePicker.launchImageLibraryAsync();
if(pickerResult.cancelled === true) {
return;
}
setImage({localUri: pickerResult.uri});
}
if(image !== null) {
return (
<Image source={{uri: image.localUri}}/>
);
}
return(
<View style={styles.yourProfileContent}>
<Overlay isVisible={visible} onBackdropPress={toggleOverlay} fullScreen={true}>
<View style={styles.yourProfileChangePassword}>
<TouchableOpacity style={{padding: 5}} onPress={openImagePickerAsync}>
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
<MaterialCommunityIcons name='camera' size={50} color='#ff66ff'/>
</TouchableOpacity>
<View style={{flexDirection: 'row'}}>
<MaterialCommunityIcons name='pencil' size={20} color='#ff66ff' style={styles.sellIcons}/>
<TextInput maxLength={20} style={styles.textInput} placeholder='Title' placeholderTextColor='#ff66ff' maxLength={20}/>
</View>
<View style={{flexDirection: 'row'}}>
<MaterialCommunityIcons name='cash' size={20} color='#ff66ff' style={styles.sellIcons}/>
<TextInput style={styles.textInput} placeholderTextColor='#ff66ff' placeholder="Price (dollars)"
/>
</View>
<View style={{flexDirection: 'row'}}>
<MaterialCommunityIcons name='book' size={20} color='#ff66ff' style={styles.sellIcons}/>
<TextInput style={styles.textInput} placeholderTextColor='#ff66ff' placeholder="Description" maxLength={200} multiline={true}
/>
</View>
<Button color='#ff66ff' title="POST"/>
<Text style={styles.register} onPress={toggleOverlay}>Go back.</Text>
</View>
</Overlay>
<Text style={{textAlign: 'center', fontSize: 20, fontWeight:'bold', marginBottom: 5, color: '#ff66ff'}}>Create new listing</Text>
<TouchableOpacity style={styles.addListing} onPress={toggleOverlay}>
<Text style={{color: 'white'}}>+</Text>
</TouchableOpacity>
</View>
);
}
I read that expo managed react native apps dont have access to the androidmanifest.xml file to allow permission for camera picker, but I used expo-image-picker which says that In managed apps, the permissions to pick images, from camera (Permissions.CAMERA) or camera roll (Permissions.MEDIA_LIBRARY), are added automatically. My app still crashes and sometimes throws the error: Lateinit property stripe has not been initialized. I do not have access to the android files because it is an expo managed project. I am very stuck.
This error has to do with our most recent update to Expo Go on Android
Also a new version for the ExpoGo app has been released.
update your expo go app to Expo Go 2.19.6.
Read full coversation here
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>