CODEWITHSUNDEEP
react-native
Kyle Johnson
Kyle Johnson

Reputation: 961

React Native - Vertical align image with resizeMode "contain"

When an image has a resize mode "contain" it seems to align/justify the actual image in the center, the image content however is aligned/justified at flex start.

<Image resizeMode="contain" ...>
<Text>Title</Text>
</Image>

With the following I'm seeing the text appearing above the image.

Is there any way to vertically align the contained image to top ?

Upvotes: 49

Views: 44923

Answers (7)

Val
Val

Reputation: 75

I just faced the same issue and none of the suggested solutions worked for me. An image with resizeMode="contain" setting always gets centered and ignores the justifyContent setting of the outer container.

I managed to "fix" this by setting both width and height of the image to undefined and also specifying its aspectRatio:

    <View
      style={
          justifyContent: 'flex-end',
        }}
    >
      <Image
        source={require('./img/source.png')}
        style={{
          // This is as strange as it gets. The `flex-end` setting works _only_ if I pass the image's aspect ratio
          // and `undefined` for width and height properties. If any of these are missing, the image with `resizeMode="contain"
          // will be centered vertically and ignore the `justifyContent` setting of the outer container.
          aspectRatio: 0.5622, // In my case
          width: undefined,
          height: undefined,
          resizeMode: 'contain',
        }}
      />
    </View>

Upvotes: 1

SomethingOn
SomethingOn

Reputation: 10921

I was able to simulate CSS backgroundPosition using the following code:

<View style={{ overflow: 'hidden' }}>
  <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} />
</View>

Because of the overflow: 'hidden' on the View the heigh of the image can be adjusted without seeing the extra height of the image. You'll need to user 'cover' rather than 'contain' for the resize mode as well otherwise you'll end up with a centered image that isn't as wide as the View container if you set the height of the image too large.

In the top example below the Image height (blue dotted line) is larger than the bottom example and therefore the center line of the image sits lower in the view. By reducing the height of the image (blue dotted line) in the second example, the center line of the image moves up in the view.

enter image description here

Upvotes: 10

Zachary Dahan
Zachary Dahan

Reputation: 1499

Using resizeMethod="resize"

I've found a solution that doesn't requires any extra tags or tricks. Just one single prop.

Lore

I had the same issue because my image on remote is @3x the regular size. And once loaded on the phone with { height: 100, width: 300, resizeMode: 'contain' } styling values, it centered automatically.

Example

To fix it, I've just added the prop resizeMethod like the following :

<Image
  style={{ height: 100, width: 300, resizeMode: 'contain' }}
  source={{ uri: 'https://www.fillmurray.com/900/300' }}
  resizeMode="contain"
  resizeMethod="resize"
/>

Upvotes: 9

Muhammad Talha
Muhammad Talha

Reputation: 832

Its very simple. First find height of the screen:

const height = Dimensions.get('window').height

Now go to your style property and set the marginVertical prop to (height / 4) below:

<Image source = {// some url} resizeMode = 'contain' style = {width: '100%', height: height/2, marginVertical: height/4}

Now your image will be vertically centered.

Upvotes: 1

Corentin S.
Corentin S.

Reputation: 6000

You need to use styles on your Image to set the vertical alignment you want.

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}>
          <Text style={styles.instructions}>
            Hello !
            </Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 500,
    justifyContent: "space-around",    //  <-- you can use "center", "flex-start",
    resizeMode: "contain",             //      "flex-end" or "space-between" here
  },
  instructions: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: "transparent",
    fontSize: 25,
  },
});

See https://rnplay.org/apps/9D5H1Q for a running example

Upvotes: 7

Daniel Jose Padilla Pe&#241;a
Daniel Jose Padilla Pe&#241;a

Reputation: 602

You need to fix some of values an the other let without set. in most cases let width fixed. Be carefully with parent flex option. It could change your design.

Upvotes: -1

Anthony Garant
Anthony Garant

Reputation: 632

I needed to do the same thing. The best way I found to accomplish this was to explicitly give the height or width of the image. Then, by wrapping your image in an other component, you can use justifyContent to have full control on the position of the image.

It's true that you might not always have the width or height of the image. However, quite often (especially is using resizeMode: 'contain') you want to set the height or width relative to something. I wanted the height to be equal to the width of the viewport. Here is the solution that I used:

<View style={{ flex: 1, justifyContent: 'flex-start' }}>
    <Image
      source={{ uri: imagePath }}
      resizeMode="contain"
      style={{ height: vw(100) }}
    />
 </View>

The vw is a helper function that comes from this answer.

Upvotes: 0

Related Questions