Search code examples
imagereact-nativereact-native-flexbox

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.


Solution

  • You could try

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