Place image to the bottom of containing box

Question

In React Native, I have this Image tag:

            <Image
              style={imageStyle.content}
              source={{uri: myImageUri}}
            />

Which has this styling:

const imageStyle = StyleSheet.create({
    content:{
        flexDirection:'column',
        alignItems:'flex-end',
        justifyContent:'flex-end',
        backgroundColor: '#7CFC00',//light green
        width: '95%'
        height: '75%',
        resizeMode: 'contain'
    }
});

This image is generated:

I would like the photo to appear at the bottom of the space allocated for the Image container.

However, I'm not able to do that. In the styling, I specified alignItems:'flex-end' and justifyContent:'flex-end' but neither works.

Any idea how can I push the image to the bottom of the container?

score 1 · Answer 1 · 2017-10-04T16:03:29.557

It's very simple and there's two ways of doing it

Alternative one:

<View style={{justifyContent: "flex-end", height: 150, width: 150}}>
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} />
</View>

This does not position the image absolutely and will not overflow other content, if some other child component gets declared under the current Image component, it will move the first one up and the new child component will be positioned in the bottom.

Alternative two:

<View style={{justifyContent: "flex-end", height: 150, width: 150}}>
    <Image 
        style={{
            flex: 1, 
            height: 50,
            position: "absolute",
            bottom: 0,
            left: 0,
            zIndex: 33
        }} 
        source={require("imageUri")} 
    />
</View>

The Image component does in fact become absolutely positioned bottom. If the zIndex property is greater than any of the other components default or modified zIndex value, the component will overlap and render above the other components. It will hide the content under the image, just like in CSS.

Alternative three:

<View style={{justifyContent: "space-between", height: 150, width: 150}}>
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} />
    <Image style={{flex: 1, height: 50}} source={require("imageUri")} />
</View>

This method is used to create even spacing between all child components. The last child component will be positioned bottom but not absolutely. This is good only when you want either a component on the top and bottom and also if you want a third component positioned in the middle. You can add as many as you want, this method will only be useful if you don't declare too many child components with a total height that exceeds the container height.

It also depends on what you're trying to achieve. If you're creating some sort of brand or logo watermark, choose the absolutely positioned method. If not, choose the first alternative. Then again, use the third alternative if you want other objects evenly spaced between the top and bottom components.

score 0 · Answer 2 · answered Oct 04 '17 at 14:43

You can fix an image to the bottom of a div with the below code. You'll have to amend the class name to one used by your image.

.image{
  position: absolute;
  bottom: 0;
}

A similar question was asked here.

How to align an image to the bottom of the div?

score 0 · Answer 3 · edited Oct 04 '17 at 16:06

0

alignItems and justifyContent work on the child components. Therefore, wrap the Image inside a View and then set the style of the View to be alignItems: "flex-end" . Something like this:

<View style={{ justifyContent: 'flex-end' }}>
    <Image ... />
</View>

edited Oct 04 '17 at 16:06

answered Oct 04 '17 at 15:12

Khalil Khalaf

9,259
11
62
104

Place image to the bottom of containing box

3 Answers3