I have two images that I would like to display side by side at the top of the screen.
<View style={styles.container}>
<View style={styles.topWrapper}>
<Image source={TOP_START_GRAPHIC} style={styles.topStartImage} />
<Image source={TOP_END_GRAPHIC} style={styles.topEndImage} />
</View>
// other content goes here...
</View>
</View>
Here are the styles used:
const styles = StyleSheet.create({
container: {
flex: 1,
},
imgBackground: {
flex: 1,
resizeMode: "cover",
},
topWrapper: {
flex: 1,
},
topStartImage: {
width: screen.width * 0.6,
height: screen.height * 0.4,
resizeMode: "contain",
justifyContent: "flex-start",
alignItems: "flex-start",
alignContent: "flex-start",
position: 'absolute',
zIndex: 2,
},
topEndImage: {
right: 0,
width: screen.width * 0.45,
height: screen.height * 0.6,
resizeMode: "contain",
position: 'absolute',
zIndex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
alignContent: "flex-start",
},
})
I have set the background color to check the image spacing, but I noticed that the images are centered within the space instead of being at the top of the screen. I have tried setting the alignment to 'flex-start' for both content and items, but it does not seem to work.
//EDITED:
Actual view: link to actual view
Expected view: link to expected view
Can anyone assist with this issue?