How to resize image with React Native ? Why is it so complicated?

Question

My original image measures 1080 (w) * 607 (h). It comes from a server (not from local). The dimensions are not supposed to be known (I have a lot of image with different dimensions).

I simply want my image to be fully visible on my device, respecting the ratio.

I tried to display this image in resizeMode : contain with a width: 100%. It displays very well, but with a big huge margin (I added a red background to realize this). I don't understand this margin.

return (
  ...
    <Image
      source={{ uri: http://... }}
      containerStyle={[
        styles.image_container
      ]}
      resizeMode="contain"
    />
  ....
)

const styles = StyleSheet.create({
    image_container: {
    backgroundColor: 'red',
    width: '100%',
    aspectRatio: 1
  },
)}

I think it's because of aspectRatio: 1. But if I remove aspectRatio: 1 the image is hidden. I tried a lot of combination with width / height / aspectRatio.

I searched a lot (a lot a lot) on google but this question often returns a ton of possibility (with lot of calculs (example)) and no universal answer.

I think my situation is the simplest but it seems so complicated it gets weird.

Have you tried a calculated `aspectRatio` like [this one](https://stackoverflow.com/questions/39631895/how-to-set-image-width-to-be-100-and-height-to-be-auto-in-react-native#56784685)? I can not check now but seems to be something that is simple & working. — Dávid Laczkó, Apr 21 '21 at 17:14
@Gaylord.P please consider awarding bounty if my answer helped you. Your reputation spent on bounty will not come back to you even if you don't award the bounty to anyone. https://stackoverflow.com/help/bounty — Vipul, Apr 24 '21 at 08:57

Vipul · Accepted Answer · 2021-04-21T16:38:59.683

0

Try this:

import React, { useState } from 'react'
import { View, Image, Dimensions } from 'react-native';

const [width, setWidth] = useState();
const [height, setHeight] = useState();
const win = Dimensions.get('window');
Image.getSize(myUri, (width, height) => {setWidth(width); setHeight(height)});
const a = 0.5;

const App = () => {
  return(
    <View>
      <Image source={myUri} style={styles.image}>
    </View>
  )

}

const styles = Stylesheet.create({
  image: {
    resizeMode: 'contain',
    width: a * win.width,
    height: (a * win.width)*(height/width),
  }
})

Here we are using the width of the screen to determine what should be the optimum width of the image. You can vary the value of a in order to set desired width %. height is calculated to maintain the aspect ratio of the image.

edited Apr 21 '21 at 16:38

answered Apr 21 '21 at 16:29

Vipul

734
1
10
27

Why not just a constant `width`% and a calculated `aspectRatio`? – Dávid Laczkó Apr 21 '21 at 17:46
@DávidLaczkó That depends on the user. The code I wrote provides flexibility to change width% – Vipul Apr 21 '21 at 17:52
I see, but for the specific question it seems a little bit overcomplicated. A simple solution as the OP asked could be one I linked under the question. – Dávid Laczkó Apr 21 '21 at 18:01

score 0 · Answer 2 · answered Apr 22 '21 at 10:21

you can use react-native-scalable-image

yarn add react-native-scalable-image

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';

const image = (
   <Image
       width={Dimensions.get('window').width} // height will be calculated automatically
       source={{uri: '<image uri>'}}
   />
);

How to resize image with React Native ? Why is it so complicated?

2 Answers2