Image resizing in React Native

Question

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...

Answer 1

Try this: (for more details click here)

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

Answer 2

image auto fix the View

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

Answer 3

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.

Answer 4

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.

Answer 5

You can use react native scalable image

https://www.npmjs.com/package/react-native-scalable-image

  import Image from 'react-native-scalable-image';


     <View style={{width:200,height:200,overflow:'hidden'}}>
        <Image
          width={200} // height will be calculated automatically
          source={{uri: '<image uri>'}}
         />
     </View>

Answer 6

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.