0
177
ViewsHow can I take the original image size in reactnavie conditional rendering?
The PostList function is a component inside FlatList.
When I have an item.Image, I want the Image to occupy that size with conditional rendering and push item.content
But with my code, it doesn't take up as wide as the Image due to item.content. like this Screenshot the green one is Image width
How can I push the item.content when the item.Image is present while the Image takes up its normal width?
this is my code
const PostList = ({item}: Props) => {
return (
<>
<View style={styles.main}>
<View style={styles.min}>
<View style={styles.middlecon}>
<Text style={styles.content} numberOfLines={2} ellipsizeMode="tail">
{item.content}
</Text>
</View>
</View>
{item.Image && (
<View style={styles.rightcon}>
<Image style={styles.Image} />
</View>
)}
</View>
</>
);
};
const styles = StyleSheet.create({
main: {
borderBottomWidth: 0.3,
borderColor: '#b0b4b8',
paddingBottom: 30,
flexDirection: 'row',
justifyContent: 'space-between',
},
min: {},
middlecon: {},
content: {},
rightcon: {
backgroundColor: 'lightblue',
},
Image: {
width: 100,
height: 30,
backgroundColor: 'lightgreen',
},
});
1 answers
Answer question0
You have to also pass the image's source to the Image component.
Like so:
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
Also, if you don't have the image stored locally and you instead of its uri, you can do the following:
<Image
style={styles.tinyLogo}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
Source: https://reactnative.dev/docs/image
Also, to make sure that the image stays within the height and width you've set in your styles, add resizeMode: contain as another prop to the Image component.