How to force an image to be full width and maintain aspect ratio using React Native?

Question

I have an image that I pull down from a URL. I do not know the dimensions of this image ahead of time.

How do I style / layout the image so that it is the full width of the parent view and the height is calculated so that the aspect ratio is maintained?

I have tried using onLoad in 0.34.0-rc.0 and the height / width are both 0 in event.nativeEvent.source.

The image is in a <ScrollView/>. I am not after a full screen image.

I've not been able to use 'cover' or 'contain' without a height set. Any ideas? — Alex Curtis, Sep 14 '16 at 18:39
ahh there's this weird thing with setting them to null and using flex... I think you'll find your answer here somewhere: http://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native — dv3, Sep 14 '16 at 18:41
I don't think that works if its in a scroll view. I'm not after a full screen image. — Alex Curtis, Sep 14 '16 at 18:45
Why can't you just do this in CSS? https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio — TylerH, Sep 19 '22 at 14:33
Does this answer your question? [What's the best way to add a full screen background image in React Native](https://stackoverflow.com/questions/29322973/whats-the-best-way-to-add-a-full-screen-background-image-in-react-native) — TylerH, Sep 19 '22 at 14:34

score 37 · Answer 1 · edited Jan 10 '18 at 15:12

37

My use was very similar in that I needed to display an image with full screen width but maintaining its aspect ratio.

Based on @JasonGaare's answer to use Image.getSize(), I came up with the following implementation:

class PostItem extends React.Component {

  state = {
    imgWidth: 0,
    imgHeight: 0,
  }

  componentDidMount() {

    Image.getSize(this.props.imageUrl, (width, height) => {
      // calculate image width and height 
      const screenWidth = Dimensions.get('window').width
      const scaleFactor = width / screenWidth
      const imageHeight = height / scaleFactor
      this.setState({imgWidth: screenWidth, imgHeight: imageHeight})
    })
  }

  render() {

    const {imgWidth, imgHeight} = this.state

    return (
      <View>
        <Image
          style={{width: imgWidth, height: imgHeight}}
          source={{uri: this.props.imageUrl}}
        />
        <Text style={styles.title}>
          {this.props.description}
        </Text>
      </View>
    )
  }
}

edited Jan 10 '18 at 15:12

Nikasv

1,317
5
17
33

answered Feb 16 '17 at 08:43

nburk

22,409
18
87
132

2

Thanks for the code! I have been using the component react-native-fit-image but has a lot of problems loading images, sometimes fails to render The unique modification I did to your code is the style of the Image is ```` – Xavier Ojeda Aguilar Apr 25 '17 at 00:31
Where do I mention the actual url for the image? – Somename Aug 13 '17 at 19:18
`'Dimensions' is not defined.` – Philipp Ludwig Sep 01 '19 at 19:41
@PhilippLudwig import { Dimensions } from 'react-native'; – oschvr Oct 30 '19 at 16:15

score 25 · Answer 2 · edited Feb 18 '20 at 17:10

25

I am new on react-native but I came across this solution using a simple style:

imageStyle: {
  height: 300,
  flex: 1,
  width: null}

Image full width from my 1º App:

It worked for me.

edited Feb 18 '20 at 17:10

Dharman

30,962
25
85
135

answered Feb 24 '18 at 02:30

rfdc

1,665
1
10
15

This does seem to work actually. PS: I had to remove my resizeMode="contain". – Eirik H Mar 22 '19 at 08:58
4

How does that answer the original question? You have to know the height of the image ahead... – Michał Kaczanowicz Dec 01 '20 at 16:53

score 8 · Accepted Answer · edited Apr 27 '22 at 05:22

8

React Native has a function built in that will return the width and height of an image: Image.getSize(). Check out the documentation here

edited Apr 27 '22 at 05:22

KetZoomer

2,701
3
15
43

answered Sep 14 '16 at 18:53

Jason Gaare

1,511
10
19

Kakashi · Answer 4 · 2017-10-06T14:38:54.673

It worked for me.

import React from 'react'
import { View, Text, Image } from 'react-native'

class Test extends React.Component {
  render() {
    return (
      <View>
        <Image
          source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
          style={{ height: 200, left: 0, right: 0 }}
          resizeMode="contain"
        />
        <Text style={{ textAlign: "center" }}>Papaya</Text>
      </View>
    );
  }
}

export default Test;

Another way you can get width of parent view after layout event.

<View 
  style={{ flex: 1}} 
  layout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
/>

When you get width parent view from layout event then you can assign width to Image tag.

import React from 'react';
import { View, Image } from 'react-native';

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 300,
      width: 0
    };
  }
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row'
      }}>
        <View style={{ width: 50, backgroundColor: '#f00' }} />
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fafafa' }}
          onLayout={(event) => { this.setState({ width: event.nativeEvent.layout.width }); }}
        >
          {
            this.state.width === 0 ? null : (
              <Image
                source={{ uri: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQL6goeE1IdiDqIUXUzhzeijVV90TDQpigOkiJGhzaJRbdecSEf" }}
                style={{ width: this.state.width, height: this.state.height }}
                resizeMode="contain"
              />
            )
          }
        </View>
      </View>
    );
  }
}
export default Card;

score 2 · Answer 5 · answered Oct 06 '19 at 18:04

if you have a static image you can use like this

import React, { Component } from "react";
import { View, Animated, Image, Dimensions } from "react-native";
import splashScreen from "../../../assets/imgs/splash-screen.png";

export default class MasterPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
      imgWidth: 0,
      imgHeight: 0
    };
  }
  checkLogIn = async () => {
    const width = 533; // set your local image with
    const height = 527; // set your local image height 
    // calculate image width and height
    const screenWidth = Dimensions.get("window").width;
    const scaleFactor = width / screenWidth;
    const imageHeight = height / scaleFactor;
    this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
  };

  async componentDidMount() {
    Animated.timing(
      // Animate over time
      this.state.fadeAnim, // The animated value to drive
      {
        toValue: 1, // Animate to opacity: 1 (opaque)
        duration: 800, // Make it take a while
        useNativeDriver: true
      }
    ).start(this.checkLogIn);
  }

  render() {
    const { imgWidth, imgHeight, fadeAnim } = this.state;
    return (
      <Animated.View
        style={{
          opacity: fadeAnim,
          backgroundColor: "#ebebeb",
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View>
          <Image
            source={splashScreen}
            style={{ width: imgWidth, height: imgHeight }}
          />
        </View>
      </Animated.View>
    );
  }
}

score 0 · Answer 6 · edited Jan 15 '22 at 05:42

try this: pass image uri and parentWidth (can be const { width } = Dimensions.get("window");) and voila... you have height auto calculated based on width and aspect ratio

import React, {Component} from 'react';
import FastImage from 'react-native-fast-image';

interface Props {
  uri: string;
  parentWidth: number;
}

interface State {
  calcImgHeight: number;
  width: number
  aspectRatio: number
}

export default class CustomFastImage extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      calcImgHeight: 0,
      width: props.parentWidth,
      aspectRatio: 1
    };
  }
  componentDidUpdate(prevProps: Props){
    const { aspectRatio, width }= this.state
    const { parentWidth} = this.props
   
    if( prevProps.parentWidth !== this.props.parentWidth){
        this.setState({
            calcImgHeight: aspectRatio * parentWidth,
            width: parentWidth
          })
    }
  }
  render() {
    const {calcImgHeight, width} = this.state;
    const {uri} = this.props;
    return (
      <FastImage
        style={{width: width, height: calcImgHeight}}
        source={{
          uri,
        }}
        resizeMode={FastImage.resizeMode.contain}
        onLoad={(evt) =>
          {
              this.setState({
            calcImgHeight: (evt.nativeEvent.height / evt.nativeEvent.width) * width, // By this, you keep the image ratio
            aspectRatio:  (evt.nativeEvent.height / evt.nativeEvent.width), 
          })}
        }
      />
    );
  }
}

barcobasurero88 · Answer 7 · 2023-01-14T20:03:26.183

0

in my case it works for me changing the aspect ratio and the flex of the image like this

flex:1,aspectRatio:1.2, height:null

edited Jan 14 '23 at 20:03

answered Jan 14 '23 at 20:02

barcobasurero88

1
1

score -4 · Answer 8 · answered Mar 10 '17 at 04:24

-4

incase you can't solve it yet, React Native v.0.42.0 have resizeMode

<Image style={styles.intro_img} source={require('img.png')}

answered Mar 10 '17 at 04:24

user7103816

21
1

How to force an image to be full width and maintain aspect ratio using React Native?

8 Answers8