CODEWITHSUNDEEP
react-native
Jitender
Jitender

Reputation: 7971

Scale image in React Native

Scale image like we do in HTML. img {height:100%; width:100%} in react native.

I have tried resizeMode?: enum('cover', 'contain', 'stretch', 'repeat', 'center') but none of them work in my case.

<View style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    flexDirection:'row'
  }}>
        <View style={{flex:1, backgroundColor:'yellow'}}>
        <Image
          style={{width: 50, height: 50}}
          resizeMode="stretch"
          source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}}
        />
        </View>
        <View style={{flex:1, backgroundColor:"red"}}>
           <Text>afdafda</Text>
        </View>

      </View>

https://snack.expo.io/ByhjFQo1M

Upvotes: 2

Views: 10613

Answers (1)

ReyHaynes
ReyHaynes

Reputation: 3092

You have to add the {height: 50} to the container for the image...

...and set the image size to {flex: 1}

...and spell stretch correctly. 🙃

So replace:

<View style={{flex: 1, backgroundColor: 'yellow'}}>
  <Image
    style={{width: 50, height: 50}}
    resizeMode="strech"
    source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}}
   />

With:

<View style={{flex: 1, height: 50, backgroundColor: 'yellow'}}>
  <Image
    style={{flex: 1}}
    resizeMode="stretch"
    source={{uri: 'http://aristotlebuzz.com/wp-content/uploads/2017/01/Facebook.png'}}
   />
</View>

Upvotes: 6

Related Questions