my code isn't giving me the expected design - react-native

Question

I want to make feed screen and this is what i want to achieve for every post item.
This is what i have currently . I thought this will do the work. Am I making a mistake somewhere or I need to add someting else to the styles? I struggle with design and thought this will be enough to structure the components. For example, I expected the image to be the top element but somehow it is in the middle... Also, when I have such problems, how to cope with them, any tips?
<View style={styles.wrapper}>
<Opacity onPress={props.onPostSelect}>
<View style={{ ...styles.postContainer, ...props.style }}>
{/* thumbnail */}
<View style={styles.thumbnailContainer}>
<Image
resizeMode="contain"
source={{ uri: props.item.thumbnailURL }}
style={styles.thumbnail}
/>
</View>
{/* thumbnail end*/}
{/* info container */}
<View style={styles.infoContainer}>
<View style={styles.postDetailsContainer}>
{/* //TITLE */}
<View style={styles.title}>
<Text style={styles.text} numberOfLines={1}>
{props.item.title}
</Text>
</View>
{/* //TITLE end*/}
{/* LIKES/VIEWS */}
<View style={styles.likesAndViewsContainer}>
<Text style={styles.text}>{props.item.views} views | </Text>
{/* LIKES */}
<View style={styles.likesContainer}>
<MaterialIcons name="thumb-up" color="white" size={18} />
<Text style={styles.text}> {props.item.likes} </Text>
</View>
</View>
</View>
</View>
</View>
</Opacity>
</View>
the styles :
const styles = StyleSheet.create({
postContainer: {
justifyContent: "center",
borderWidth: 7,
borderColor: "brown",
borderRadius: 2,
backgroundColor: "pink",
marginHorizontal: 5,
height: "95%",
overflow: "hidden",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
},
wrapper: {
flex: 1,
flexGrow: 1,
height: 500,
width: "100%",
backgroundColor: Colors.secondaryColors.lightGray,
overflow: "hidden",
},
title: {
flexDirection: "column",
color: "white",
height: "80%",
},
likesAndViewsContainer: {
flexDirection: "row",
justifyContent: "flex-start",
overflow: "hidden",
},
text: {color:black},
likesContainer: {
flexDirection: "row",
},
thumbnail: {
flex: 1,
width: 100,
height: "100%",
position: "absolute",
},
thumbnailContainer: {
flex: 1,
height: "100%",
width: "100%",
marginVertical: 10,
position: "absolute",
right: 10,
left: 10,
},
infoContainer: {
flexDirection: "row",
},
postDetailsContainer: {
color: "white",
fontSize: 16,
flexDirection: "column",
},
});

Answer 1

i think there's something to do with your position:'absolute' and flex:1.
I've cleaned it up a bit, and do tell me, if this is what you're going for
<View style={styles.wrapper}>
<View style={styles.postContainer}>
<View style={styles.thumbnailContainer}>
<Image
resizeMode="contain"
source={{ uri: props.item.thumbnailURL }}
style={styles.thumbnail}
/>
</View>
<View style={styles.infoContainer}>
<Text style={styles.text} numberOfLines={1}>{props.item.title}</Text>
<View style={styles.likesAndViewsContainer}>
<Text style={styles.text}>{props.item.view} views | </Text>
<View style={styles.likesContainer}>
<MaterialIcons name="thumb-up" color="white" size={18} />
<Text style={styles.text}> {props.item.likes} </Text>
</View>
</View>
</View>
</View>
</View>
the styles:
const styles = StyleSheet.create({
postContainer: {
borderWidth: 1,
borderColor: "brown",
backgroundColor: "pink",
padding:15,
},
wrapper: {
flex:1,
backgroundColor: 'gray',
},
likesAndViewsContainer: {
flexDirection: "row",
justifyContent: "flex-start",
},
text: {
color:'black',
marginBottom:15,
fontWeight:'bold',
},
likesContainer: {
flexDirection: "row",
},
thumbnailContainer:{
height: 100,
width:100,
borderWidth:1,
alignSelf:'center',
},
thumbnail: {
height: 100,
width:100,
},
infoContainer: {
marginTop:15,
},
});