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


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.

Category:javascript Time:2017-12-06 Views:2

Related post

  • Full screen image in React Native 2017-05-03

    How do you make an <Image> fill the entire UIWindow sized area in React Native? If I were using Autolayout I would set a constraint on each edge, but flux is very different paradigm and I'm not a web guy. Without setting a manual width/height on my

  • Good Image Resizing Framework 2009-06-28

    I'm currently resizing images in PHP, and my current code takes about 2-2.2 seconds (not including upload time) to resize an image to two sizes, one thumbnail size, and one medium-sized. Can anyone recommend a framework or class that I could download

  • java 1.4 good quality image resize 2011-08-04

    We have a photo gallery that is using servlets to resize images - we need good performance and decent quality, but we just can't get it right. Also, sadly enough, we have only java 1.4, which leaves us to almost no external image libraries (nearly ev

  • image resize gives slight, brief, pixelation in WebKit browsers 2011-10-26

    jsfiddle: Notice the slight, brief pixelation after the animation. This error only happens in WebKit browsers. Using jQuery, I have an image resize into a smaller one. The new dimensions are precisely half of the old ones.

  • Large Image resizing libraries 2008-09-22

    Does anyone know of any good image resizing libraries that will handling resizing large images(~7573 x ~9485). Something that is fast and doesn't chew to much memory would be great. At the moment I am using IrfanView and just shell invoking it with a

  • Flash upload image resize client side 2009-01-10

    Does anyone got an ideia on how to get client side image resize using flash. Example: Client chooses an image with 1200x800 and before it uploads it flash will turn it into half of it or something. Any thoughts? --------------Solutions------------- P

  • CDN options for image resizing 2009-01-29

    Background: I working on an application on Google App Engine. Its been going really well until I hit one of their limitations in file size -- 1MB. One of the components of my application resizes images, which have been uploaded by users. The files ar

  • reasonable PHP memory_limit for image resize 2009-02-09

    I want to enable users on my site to upload images to their accounts. The images get resized into 4 different sizes required across the site. I have been using Pear Image_Transform but I kept getting "bytes exhausted" fatal errors on certain types of

  • Image resize before upload 2009-06-07

    I need to provide a means for a user to upload photos to their web site in jpeg format. However, the photos are very large in original size, and I would like to make the resize before upload option very effortless for the user. It seems my only optio

  • How to make the thumbnail go to /tmp/thumb/ and keep the original image on /tmp/ with Image Resizer? 2009-06-13

    I'm trying to play with image resizer and I got the following code if (is_uploaded_file(@$_FILES['ulimage']['tmp_name'])){ $targetfilename = ImageHelper::treatFilename(uniqid() . "_" . $_FILES['ulimage']['name']); move_uploaded_file($_FILES['ulimage'

  • Image resizing web service 2009-06-16

    Does someone know a good web service to resize images ? Either an open source (PHP/Python/Ruby) application, or a company providing a web service api. --------------Solutions------------- So you're asking for a website? is what

  • iPhoto-like image resizing using jQuery 2009-07-30

    Here is the effect that I need: Is there any jQuery plugin doing the same thing? --------------Solutions------------- The answer is in your demo page. If you read th

  • php image resize script dividing by zero 2009-08-08

    This was working a few moments ago, not sure what changed. error log reads [08-Aug-2009 02:09:20] PHP Warning: readfile(/images/32321249694312.JPG) [<a href='function.readfile'>function.readfile</a>]: failed to open stream: No such file o

  • Image Resizer for ASP.NET 2009-08-19

    Anyone knows of any good Image resize API for --------------Solutions------------- Checkout System.Drawing Namespace MSDN Documentation Resizing Image - Stack Overflow Question Here's what I use: internal static System.Drawing.Image FixedSiz

  • ASP.NET Image Resizing 2009-10-01

    We need the ability to gracefully resize any photo/image to an exact width/height without skewing the image. We can use either a third-party solution, or we can use the built-in .NET functionality to handle this. I thought there had to be an easy sol

  • Image resize with GDI in .NET gives low saturation 2009-10-16

    I'm fighting an issue where my resized images looses color saturation when I manipulate them using GDI. I'm loading an JPG as original, resize it and the resulting image has a lot less saturation (color intensity) than the original picture. What can

  • How to make images resizable in flexible layout? 2009-11-07

    If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable? I want to make one layout for all sizes and devices --------------Solutions------------- Joel Spolsky managed to find a very

  • Image resizing question using php? 2009-11-11

    I was wondering how can I create a piece of PHP code that will check a jpg, gif, png or any other types of images using the getimagesize() . And then check if the images width is smaller then the width in the following CSS code below if so then the P

  • Image file permission - image resizer 2009-12-07

    PHP mySQL Hi, i am having an interesting problem. I have a form in my cms that allows the admin to upload images to the server. The script resizes the images to a thumbnail (170px height)and a large image(600px height). The thumbnails are around 1600

Copyright (C), All Rights Reserved.

processed in 0.646 (s). 13 q(s)