CODEWITHSUNDEEP
cssreact-nativeflexbox
christianbauer1
christianbauer1

Reputation: 536

Flexbox Header: Center item in a Flex Row

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>

enter image description here

Upvotes: 0

Views: 62

Answers (2)

Hemant Singh Yadav
Hemant Singh Yadav

Reputation: 102

Example:-

 .main-div{
          display: flex;
          justify-content: space-between;
        }
    
        .size-Of-Icon {
          width: 40px;
           border: 1px solid blue;
        }
    
        .image {
          height: 180px;
          border: 1px solid red;
        }
    
<div class="main-div">
  <div class="size-Of-Icon">ICON</div>
  <div class="image">Image</div>
  <div class="size-Of-Icon">empty div ofsame size like icon div jus to put your image in the center of screen</div>
</div>

Upvotes: 0

user18309290
user18309290

Reputation: 8380

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>

Upvotes: 1

Related Questions