CODEWITHSUNDEEP
react-native
JustABeginner
JustABeginner

Reputation: 825

Fill remaining space with image react native

This is my main view and I have Image in second child of view. The problem I am getting is, I want the image in that View component to fill the remaining space, but with no luck. Any idea how I can achieve that? I tried using null on both height and width, but it didn't show any image at all. resizeMode="cover" didn't work either. The flex property works well with other views, but not with image, don't know why. 

<View style={{flex:1}}>
    <ProgressBar progress={0.3} width={width} color={"#ff0000"} />

    <View style={{flexDirection: 'row', marginTop: 10, alignItems: 'center', flex: 0.2}}>
      <Image style={styles.userImageStyle} source={{uri: item.item.userImage}} />
      <Text style={{marginLeft: 10}}>
        {item.item.username}
      </Text>
    </View>

    <View style={{flex: 0.8, marginTop: 20}}>
      <Image style={{width: null, height: null, flex:1}} resizeMode="cover" source={{uri: item.item.posts[0].imageUrl}} />
    </View>

  </View>

Upvotes: 1

Views: 3336

Answers (2)

Hazim Ali
Hazim Ali

Reputation: 1095

use undefined rather than null. it should work

<View style={{flex: 0.8, marginTop: 20}}>
      <Image style={{width: undefined, height: undefined, flex:1}} resizeMode="cover" source={{uri: item.item.posts[0].imageUrl}} />
    </View>

Upvotes: 1

Zeeshan Ansari
Zeeshan Ansari

Reputation: 10888

Give the width '100%' and height will be null when you give flex 1 then the image will display on rest of space

You can use this code 

<View style={{flex: 0.8, marginTop: 20}}>
   <Image style={{width: '100%', height: null, flex:1}} resizeMode="cover" source= 
 {{uri: item.item.posts[0].imageUrl}} />
</View>

Upvotes: 0

Related Questions