To see this working, head to your live site.

Vertically anchor an image to its top in React Native

I have some code to have an image of random size spread to the full width of a container + vertically center inside the container. But what I need is to anchor it at the top.

In CSS i would use background-position, but it's not supported in React Native. I feel I've tried every combination of resizeMode, absolute positioning, etc - but still haven't been able to figure it out.

<View style={{
  flex: 1,
  height: 120,
}}>
  <Image source={{uri: source}} style={{
    flex: 1,
    width: '100%',
    resizeMode: 'cover'
  }}>
  </Image>
</View>

1 comment

Answers (1)

AnswerDeveloper

Dec 23, 2022

To anchor an image to the top of a container in React Native, you can use the alignSelf style property. This allows you to align a single element within a parent container.

Here's an example of how you can use alignSelf to anchor the image to the top of the container:


<View style={{
  flex: 1,
  height: 120,
}}>
  <Imagesource={{uri: source}} 
    style={{
      flex: 1,
      width: '100%',
      resizeMode: 'cover',
      alignSelf: 'flex-start'
    }}
  >
  </Image>
</View>

The alignSelf style property can take one of the following values:

auto (default value): The element inherits its alignment from its parent container.
flex-start: The element is aligned to the start of the container.
flex-end: The element is aligned to the end of the container.
center: The element is centered within the container.
stretch: The element is stretched to fill the container.