Original Image Height (Full Width)

Question

I have an image that I am dropping from a url. I do not know the size of this image ahead of time.

Like the style / layout <Image/> , so this is the full width of the parent view, and the height is calculated so that the aspect ratio is maintained?

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

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

Answer 1

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

Answer 2

My use was very similar to the fact that I needed to display an image with full-screen width , but maintained its aspect ratio .

Based on @JasonGaare's answer to using 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> ) } } 

Answer 3

I am new to reaction-native, but I came across this solution using a simple style:

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

Full-width image from my 1º application

It worked for me - what do you think?

Thank you in advance.

Answer 4

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 to get the width of the parent view after the layout event.

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

When you get the view of the parent width view from the layout event, you can assign a width to the 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; 

Answer 5

if you have a static image you can use 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> ); } } 

Answer 6

incase, you cannot solve it yet, React Native v.0.42.0 has resizeMode

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