CODEWITHSUNDEEP
react-native
Greegus
Greegus

Reputation: 586

React Native Image Position

Is there a way how to control image position with resizeMode set to cover? I'm looking for similar result as can be achieve by using background-positon: center bottom in traditional CSS.

Here is an illustration of the situation:

  1. Image with same dimensions as screen
  2. Image with custom height, picture gets centered
  3. (Desired) Image with custom height, but with picture aligned to the bottom edge of the element

enter image description here

My code:

<Image source={require('./eifell.jpg')} resizeMode={Image.resizeMode.cover} style={{ height: 300 }} />

Upvotes: 5

Views: 3216

Answers (1)

Jason Gaare
Jason Gaare

Reputation: 1511

I believe you'll have to achieve this by using the transforms prop on the image style and utilize the translateY transformation.

It will involve a little math... off the top of my head I believe you would need to follow these steps:

  1. Use Image.getSize() to find the dimensions of your image

  2. Then based on the size of your window from Dimensions.get('window') calculate how many pixels your image will scale to.

  3. Find the difference between the height displayed (say 667px) and the desired height of the image (300px in your example)

  4. Then translate the image up that many pixels.

Upvotes: 3

Related Questions