How do I make sure the image fits perfectly in the container? Width of Image should always be 100% and height of the container should adjust according to the Image. There is a max height for the container (If the image height is more than the container, I will deal with that later, probably while taking the image as input).
I know I am mostly missing something very basic but I can't recall it.
import React from "react";
import { Text, View, StyleSheet, Image } from "react-native";
export default function Post() {
return (
<View style={styles.container}>
<Image
style={styles.postImage}
source={{
uri: "https://images.unsplash.com/photo-1666298888811-b7191e4d935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1914&q=80",
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
maxHeight: 400,
borderWidth: 1,
},
postImage: {
width: "100%",
height: "100%",
resizeMode: "contain",
},
});
