CODEWITHSUNDEEP
javascriptreactjsreact-native
rahul2001
rahul2001

Reputation: 1657

Image resizing in React Native

I am trying to resize an image (smaller to fit screen) in my react native app but am unable to do it as it is too big.

Here is the code:

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC'
  },
  image: {
    width: 200,
    height: 220
  },
});

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Image source={require('image!rclogo')} style={styles.image}/>

        <Text style={styles.description}>
          Search for RCers!
        </Text>

        <Text style={styles.description}>
          Search
        </Text>

        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            placeholder='Search by Batch, Name, Interest...'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>

        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

I tried to take it out of the container tag but cannot seem to understand why it will not render properly?

Can this be done with flexbox resizeMode? How do you do it? I can't find any docs on it...

Upvotes: 120

Views: 341926

Answers (22)

PLy
PLy

Reputation: 89

This worked for me:

<View style={{height:25, width:25}}>
          <Image
            source={the source goes here}
            resizeMode="contain"
            style={{ height: 50, width: 50}}
          />
      </View>

Things that didn't work:

  • Setting null to image style's height and width
  • Setting flex:1 to image style
  • Also, for newer version, image resizeMode is outside of style. and things that didn't work:

Upvotes: 0

shixukai
shixukai

Reputation: 1905

image auto fix the View

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
}

Note that the image must be in a container with a predefined size for that to work

Upvotes: 170

Md Mahir
Md Mahir

Reputation: 101

**You can use like this **

<Image
    style={{
        height: 300,
        width: 300,
        resizeMode: "contain",
    }}
    source={require("../../assets/empty-cart.webp")}
    alt="empty-cart"
/>

Upvotes: 0

Shraddha Muley
Shraddha Muley

Reputation: 91

add resizeMode="contain" in your tag.

<Image resizeMode="contain" />

Upvotes: 2

Samson Alejolowo
Samson Alejolowo

Reputation: 21

this worked for me

height: undefined,
width: undefined,
flex: 1,
resizeMode: "contain",

wrap the image in a View with flex:1

Upvotes: 1

glyvox
glyvox

Reputation: 58049

To avoid the huge padding when resizing using 'contain', use 'stretch' with a height and an aspectRatio (that idea is from this answer).

{ height: '20%', aspectRatio: 1, resizeMode: 'stretch' }

Upvotes: 6

Shyam Bihari Swami
Shyam Bihari Swami

Reputation: 19

I got the image Size and set it to max 130 width and 30 height.

const [imageSize, setImageSize] = useState();
Image.getSize(url, (width, height) => {
      setImageSize(logoSize(width, height));
});
...
<Image style={imageSize ?? initialSize} source={{uri: url}} />
...


const logoSize = (width, height) => {
  var maxWidth = 110;
  var maxHeight = 30;

  if (width >= height) {
    var ratio = maxWidth / width;
    var h = Math.ceil(ratio * height);

    if (h > maxHeight) {
      // Too tall, resize
      var ratio = maxHeight / height;
      var w = Math.ceil(ratio * width);
      var ret = {
        width: w,
        height: maxHeight,
      };
    } else {
      var ret = {
        width: maxWidth,
        height: h,
      };
    }
  } else {
    var ratio = maxHeight / height;
    var w = Math.ceil(ratio * width);

    if (w > maxWidth) {
      var ratio = maxWidth / width;
      var h = Math.ceil(ratio * height);
      var ret = {
        width: maxWidth,
        height: h,
      };
    } else {
      var ret = {
        width: w,
        height: maxHeight,
      };
    }
  }

  return ret;
};

Upvotes: -1

Laurence
Laurence

Reputation: 7823

I tried other solutions and I didn't get the result I was looking for. This works for me.

<TouchableOpacity onPress={() => navigation.goBack()} style={{ flex: 1 }}>
        <Image style={{ height: undefined, width: undefined, flex: 1 }}
            source={{ uri: link }} resizeMode="contain"
        />
</TouchableOpacity>

Note I needed to set this as property of image tag than in css.

resizeMode="contain"

Also note that, you need to set flex: 1 on your parent container. For my component, TouchableOpacity is the root of the component.

Upvotes: 4

Kamal Hossain
Kamal Hossain

Reputation: 638

{ flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }

If you are using these attributes in your style prop in the <Image /> and the image is disappeared.

Put your image into a <View> tag. Like this:

<View 
  style={{
      width: '100%',
     height: '30%'
     }}
>
          <Image
            source={require('../logo.png')}
            style={{
              flex: 1,
              height: undefined,
              width: undefined,
              resizeMode: 'contain'
            }}
            resizeMode={'cover'}
          />
</View>

Give your view the width and height you want.

Upvotes: 2

crispengari
crispengari

Reputation: 9321

**After setting the width and the height of the image then use the resizeMode property by setting it to cover or contain.The following blocks of code translate from normal css to react-native StyleSheet

// In normal css
.image{
   width: 100px;
   height: 100px;
   object-fit: cover;
 }

// in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "cover";
 }

OR object-fit contain

// In normal css

.image{
   width: 100px;
   height: 100px;
   object-fit: contain;
 }

 // in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "contain";
 }

Upvotes: 0

Ali Shirazee
Ali Shirazee

Reputation: 1118

Hey to make your image responsive is simple: here is an article i wrote about it. https://medium.com/@ashirazee/react-native-simple-responsive-images-for-all-screen-sizes-with-flex-69f8a96dbc6f

you can simply do this and it will scale

container: {
    width: 200,
    height: 220
  },// container holding your image 


  image: {
    width: '100%',
    height: '100%',
    resizeMode: cover,
  },
});

this is because the container which holds the image determines the height and width, so by using percentages you will be able to make your image responsive to all screens size.

here is another example:

<View style={{
width: 180,
height: 200,
aspectRatio: 1 * 1.4,
}}>
<Image
source={{uri : item.image.url}}
style={{
resizeMode: ‘cover’,
width: ‘100%’,
height: ‘100%’
}}
/>
</View>

Upvotes: 5

Sunil Tako
Sunil Tako

Reputation: 387

Try this: (for more details click here)

image: { flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }

Upvotes: 14

samdoj
samdoj

Reputation: 144

Here's my solution if you know the aspect ratio, which you can either get from the image metadata or prior knowledge. This fills the whole width of the screen, but that, of course, can be adjusted. 

function imageStyle(aspect)
{
    //Include any other style requirements in your returned object.
    return {alignSelf: "stretch", aspectRatio: aspect, resizeMode: 'stretch'}
}

This looks a bit nicer than contain, and takes less finessing with sizes, and it will adjust the height to maintain the proper aspect ratio so your images don't look skewed. Using contain will preserve the aspect ratio but will scale it to fit your other style requirements, which may drastically shrink the image.

Upvotes: -3

Moazzam Khan
Moazzam Khan

Reputation: 49

{ flex: 1, resizeMode: 'contain' } worked for me. I didn't need the aspectRatio

Upvotes: 1

Felipe Braz
Felipe Braz

Reputation: 121

In my case I could not set 'width' and 'height' to null because I'm using TypeScript.

The way I fixed it was by setting them to '100%':

backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',        
}

Upvotes: 6

Jamie Hall
Jamie Hall

Reputation: 276

This worked for me:

image: {
  flex: 1,
  width: 900,
  height: 900,
  resizeMode: 'contain'
}

Just need to make sure that the width and height are bigger than you need as it is limited to what you set.

Upvotes: 11

Анураг Пракаш
Анураг Пракаш

Reputation: 717

This worked for me,

image: {
    width: 200,
    height:220,
    resizeMode: 'cover'
}

You can also set your resizeMode: 'contain'. I defined the style for my network images as:

<Image 
   source={{uri:rowData.banner_path}}
   style={{
     width: 80,
     height: 80,
     marginRight: 10,
     marginBottom: 12,
     marginTop: 12}}
/>

If you are using flex, use it in all the components of parent View, else it is redundant with height: 200, width: 220.

Upvotes: 5

GenericJam
GenericJam

Reputation: 3015

This worked for me:

image: {
    flex: 1,
    aspectRatio: 1.5, 
    resizeMode: 'contain',

  }

aspectRatio is just width/height (my image is 45px wide x 30px high).

Upvotes: 55

Henry Tiquet Leyva
Henry Tiquet Leyva

Reputation: 197

After trying some combinations, I get this working like this:

image: {
    width: null,
    resizeMode: 'contain',
    height: 220
}

Specifically in that order. I hope this can be helpful for someone. (I know that is an old question)

Upvotes: 19

Apit John Ismail
Apit John Ismail

Reputation: 2145

I adjust your answer a bit (shixukai)

image: {
    flex: 1,
    width: 50,
    height: 50,
    resizeMode: 'contain' }

When I set to null, the image wont show at all. I set to certain size like 50

Upvotes: 70

Pramod Mg
Pramod Mg

Reputation: 2320

Use Resizemode with 'cover' or 'contain' and set the height and with of the Image.

Upvotes: 1

vhs
vhs

Reputation: 10061

Ran into the same problem and was able to tweak the resize mode until I found something I was happy with. Alternative approaches include:

  • Reduce the size of the Static Resource using an image editor
  • Add a transparent border to the static resource using an image editor
  • Use a Network Resource at the expense of UX

To prevent loss of quality while tweaking images consider working with vector graphics so you can experiment with different sizes easily. Inkscape is free tool and works well for this purpose.

Upvotes: 8

Related Questions