How to have one image centered but another image in the top left corner?

Question

I would like to create a header for my React Native app. It would have one primary image centered, and then a back button to the left of it (near the edge of the screen). At the moment, I am able to get them in the same row and have the primary image centered, but cannot figure out how to bring the back arrow image to the far left.

This is my code.

<View style={styles.container}>
  <View style={styles.row}>
    <Image style={styles.backarrow} source={require('./images/backarrow.png')} />
    <Image style={styles.minilogo} source={require('./images/minibear.png')} />
  </View>
</View>

And this is the style code.

container: {
  flex: 1,
  backgroundColor: '#5683C7',
  alignItems: 'center',
  justifyContent: 'center',
},
minilogo: {
  height: 100,
  width: 100,
},
backarrow: {
  height: 50,
  width: 40,
},
row: {
  flexDirection: 'row',
  margin: 15,
  alignItems: 'center',
}

Ideally it would look like this

Any help would be greatly appreciated! Thanks.

https://stackoverflow.com/questions/38948102/center-one-and-right-left-align-other-flexbox-element — Paulie_D, Jan 08 '21 at 23:04

score 0 · Answer 1 · answered Jan 09 '21 at 01:37

using border width you can understand adjust your layout apply this stylesheet

const styles = StyleSheet.create({
  container: {
  flex: 1,
  backgroundColor: '#5683C7',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection:"column"
},
minilogo: {
  height: 100,
  width: 100,
  justifyContent:"flex-end",
  flex:7,
},
backarrow: {
  height: 50,
  width: 40,
justifyContent:"flex-start",
alignSelf:"center",
flex:3,
},
row: {
  flexDirection: 'row',
  width:"100%",
  margin: 1,
  resizeMode:"stretch",
 // backgroundColor:"green",
//  borderWidth:1,
  alignItems:"stretch",
}
});

How to have one image centered but another image in the top left corner?

1 Answers1