CODEWITHSUNDEEP
reactjsreact-native
vasavi
vasavi

Reputation: 1585

How to handle image with dynamically using react native

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

Upvotes: 0

Views: 404

Answers (1)

Chris Geirman
Chris Geirman

Reputation: 9684

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>) } });

Upvotes: 1

Related Questions