0

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.

Kevin Amiranoff
  • 13,440
  • 11
  • 59
  • 90

1 Answers1

3

You could try

<View style={{ flex: 1 }}>
            <Image source={{ uri:'http://...'}}
                style={{
                    alignSelf: 'stretch',
                    flex: 1,
                }}
            />
        </View>
Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
CodAri
  • 333
  • 1
  • 3
  • 16
  • `resizeMode` was incorrect, but `alignSelf` works as expected. Check: https://snack.expo.io/ryhO6dSf- – Samuli Hakoniemi Jun 07 '17 at 13:20
  • I am not sure.. I got some results with resizeMode. Either setting it to ''center" or "cover", etc... Here is some changes I tried : https://snack.expo.io/BJFA-FBzZ. It seems the Image is rendered at its actual size, but it is centered... Thanks for showing https://snack.expo.io ! Very useful. I think the answer is good. But I believe there is more depth to this image rendering thing... – Kevin Amiranoff Jun 07 '17 at 13:40