Question 33901 in React native Question posted in
The official React Native documentation can be found here.

Flexbox Header: Center item in a Flex Row – React native

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search