Flexbox Header: Center item in a Flex Row

Issue

I want to achieve the following Header Style with flexbox in React Native. The Image should always be centered and the Arrow Button must always stick on the left side.

What I tried so far:

        <View style={{ flexDirection: 'row' }}>
          <Ionicons name="chevron-back" size={32} />

          <Image
            style={{ height: 120, width: 120 }}
            source={{
              uri: imgUrl,
            }}
          />
        </View>

Solution

Center the image with justifyContent and use absolute position for the arrow.

<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
  <Ionicons style={{position: 'absolute', left: 8}} name="chevron-back" size={32} />
  <Image
    style={{ height: 120, width: 120 }}
    source={{
      uri: 'https://via.placeholder.com/150',
    }}
  />
</View>

Answered By - user18309290