How to handle image with dynamically using react native

Question

Here is my scenario Using component i am displaying the images.

var ImageRender = React.createClass({
    render : function(){
       return (<View style={{marginLeft:15,marginRight:15}}>
                   <Image source={uri} style={{height:220}}/>
               </View>)
    }
});

here if i specify width for image then i opened this component in another type of resolution that image width is not suitable.how to achieve this image widt dynamically

Chris Geirman · Accepted Answer · 2015-11-21 05:41:38Z

1

first get the device dimensions...

var Dimensions = require('Dimensions');
var {
  width,
  height
} = Dimensions.get('window');

then use them...

var ImageRender = React.createClass({ render : function(){ return (<View style={{marginLeft:15,marginRight:15}}> <Image source={uri} style={{height:220, width:width}}/> </View>) } });

edited Nov 21, 2015 at 5:41

answered Nov 20, 2015 at 15:35

Chris Geirman

9,7045 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vasavi Over a year ago

Thanks for the answer.It's worked but i am getting one error i.e JSON value '{width=375} of type NSDictionary cannot be converted to NSNumber.How to convert json object to number using react native

Chris Geirman Over a year ago

maybe I didn't need to wrap the value in its own curly brackets. try without

Collectives™ on Stack Overflow

How to handle image with dynamically using react native

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related