React Native responsive image width while width/height ratio of image keeps the same

Question

I want a React Native Image to have a width of 50% of the available screen-width, no modification to width:height ratio of the image.

Any hints how to solve this?

I think [react-native-fit-image](https://github.com/huiseoul/react-native-fit-image) is useful for you. — Originerd, Sep 08 '16 at 05:31
Have a look at [react-native-scalable-image](https://www.npmjs.com/package/react-native-scalable-image) — Ihor Burlachenko, Jan 18 '18 at 14:31

LHIOUI · Accepted Answer · 2016-09-04T22:35:00.180

26

Use resize mode cover and set the width to ScreenWidth / 2 you can retrive the screen width using Dimensions component

//Get screen width using Dimensions component 
var {width} = Dimensions.get('window');
//....
//In image style 
image:{
   width: width * 0.5
}
//In render function
<Image resizeMode = 'cover' style = {styles.image}/>

Edit adding overflow

//add overflow : visible 
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/>

edited Sep 04 '16 at 22:35

answered Sep 03 '16 at 23:00

LHIOUI

3,287
2
24
37

thank you, so for now this at least let's me have the correct width. When just passing a width style-property to the image, the whole image seems to collapse and does not apply any height values to the image. if i pass some height property manually, it works just fine. as i don't want to have a fixed height on each image, is there some workaround to have it "really responsive" by just applying this width? I set up some RN playground with border helpers and already including your solution [here](https://rnplay.org/apps/OWsKaQ) – manpenaloza Sep 04 '16 at 06:56
adding `overlow : visible` to style will solve the problem – LHIOUI Sep 04 '16 at 22:36
never would have figured that out that this was an overflow problem, thank you! – manpenaloza Sep 05 '16 at 04:31

Hamza Waleed · Answer 2 · 2023-04-10T09:21:14.350

Local images can be rendered without giving a fixed width and height but, for remote images you must provide dimensions as react-native cant calculate them on runtime. So, the following works for me

<View style={styles.thumbContainer}>
      <Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>

and apply following styles.

thumbContainer: {
    width: '100%',
    height: 400,
},
thumbnail: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
},

score 5 · Answer 3 · edited Jan 30 '20 at 14:23

5

This code worked for me

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

edited Jan 30 '20 at 14:23

Sujeet

558
8
13

answered Jul 22 '19 at 00:28

Max Ferreira

679
1
5
21

score 4 · Answer 4 · answered Aug 14 '19 at 19:41

The verified answer didn't work for me but gave me a good idea.

It probably didn't work because my images are within a ScrollView.

Since images require a width and a height, my solution has been to get the width of the screen and: a) For image width: multiply screen width by % of the screen width I want my image to take. b) For image height: multiply screen width by % of the screen width I want my image to take by height/width aspect ratio.

const { width } = Dimensions.get('window');

<Image style={{ width: width * 0.5, height: width * 0.5 * 2.16 }}
       source={require("everydaycheckmobile/images/introduction/5-overviewdark.png")}
/>

Works nicely, but it will be necessary to dynamically define the % of width screen you want the image to take to make it work good responsively and for various orientations.

React Native responsive image width while width/height ratio of image keeps the same

4 Answers4

Linked