CODEWITHSUNDEEP
cssreact-nativeflexbox
Shamoon
Shamoon

Reputation: 43491

How can I use react-native Image resizeMethod in a variable height container?

I have something like:

<View style={{flex: 1, flexDirection: 'column'}}>
  <View style={{ height: 30}}>...stuff</View>
  <View style={{ flexGrow: 1}}>
    <Image
        style={{
          width: '100%',
          height: '100%',
        }}
        source={{
          uri: mediaUrl,
        }}
        resizeMode='cover'

      />
  </View>
  <View style={{maxHeight: '50%'}}>...stuff</View>
</View>

So you see the bottom View adjusts based on its content, and therefore the middle one does too. The issue is the image sometimes pushes the container to not respect the third container max height.

How do I get around this?

Upvotes: 0

Views: 73

Answers (1)

Virendrasinh R
Virendrasinh R

Reputation: 79

you have to add resizeMode='cover' inside style like given below ex:

<Image
    style={{
      width: '100%',
      height: '100%',
      resizeMode='cover'
    }}
    source={{
      uri: mediaUrl,
    }}
  />

for more details => https://mehrankhandev.medium.com/understanding-resizemode-in-react-native-dd0e455ce63

Upvotes: 1

Related Questions