Answers for "react native image width 100% height auto"

full width of image and maintain aspect ratio react native

render() {
    let image = this.props.requireSource;
    const { width, height } = Image.resolveAssetSource(image);
    const ratio = height / width;
    const SCREEN_WIDTH = Dimensions.get('window').width;

    return (
        <Image source={image} style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH*ratio}} resizeMode="contain"/>
    );
}

relative width and height image react native

const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);

react native image auto height

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


const screen = Dimensions.get("window");
Image.getSize(this.state.image_url, (width, height) => {
  //full image to screen width (Change screen.width to pixel you want)
  let imageWidthRatio = width / screen.width; 
  let imageHeight = height / imageWidthRatio;
  this.setState({ width: screen.width, height: imageHeight });
});

<Image
	style={{
       width: this.state.width,
       height: this.state.height,
       alignSelf: "center",
    }}
    source={{ uri: this.state.image_url }}
/>