CODEWITHSUNDEEP
imagereact-nativereact-native-flexbox
Kevin Amiranoff
Kevin Amiranoff

Reputation: 14468

React-Native display image without declaring dimensions

In, React-Native, is it possible to display an image without declaring width and height inside style prop ?
I would like the image to take all the space it has or to be rendered at its actual dimensions. (whether resizeMode is set to cover for example.)

I read this article and tried to implement its method but with no success : https://medium.com/the-react-native-log/tips-for-react-native-images-or-saying-goodbye-to-trial-and-error-b2baaf0a1a4d

Here is my code :

    <View>
      <Image
        source={{ uri: 'https://upload.wikimedia.org/wikipedia/en/c/c8/Marvelwolverine.jpg' }}
        style={{
          flex: 1,
          height: undefined,
          width: undefined,
        }}
      />
    </View>

but nothing gets printed unless I specify hard coded width and height.

Upvotes: 0

Views: 1966

Answers (1)

CodAri
CodAri

Reputation: 353

You could try

<View style={{ flex: 1 }}>
            <Image source={{ uri:'http://...'}}
                style={{
                    alignSelf: 'stretch',
                    flex: 1,
                }}
            />
        </View>

Upvotes: 4

Related Questions