rn-remote-image-auto-size.js

import { Image, Dimensions } from 'react-native';

export default class RemoteImage extends Component {
  constructor() {
    super();
    
    this.state = {
      // this data could be static or provided by a server or api
      url: 'https://...',
      originalWidth: 1920,
      originalHeight: 1080,

      // this data will be calculated and
      // the image will be displayed based on these sizes
      resizedWidth: 0,
      resizedHeight: 0
    };
  },

  componentDidMount() {
    Image.getSize(
      imageUrl,
      (originalWidth, originalHeight) => {
        this.setImageSize();
      }
    );
  },

  setImageSize() {
    // get device dimensions
    const {width, height} = Dimensions.get('window');

    const resizedRatio = originalWidth / width;
    const resizedHeight = originalHeight / resizedRatio;

    this.setState({
      // the width of the displayed image is the width of the device
      resizedWidth: width,
      // the height of the displayed image is the calculated height
      resizedHeight: resizedHeight
    });
  },

  render() {
    const {resizedWidth, resizedHeight, url} = this.state;

    let img;
    if (resizedWidth || resizedHeight) {
      img = <Image
        source={{uri: url}}
        style={{width: resizedWidth, height: resizedHeight}}
      />;
    }
    
    return (
      {img}
    );
  }
}