I want a React Native Image to have a width of 50% of the available screen-width, no modification to width:height ratio of the image.
Any hints how to solve this?
2
-
I think react-native-fit-image is useful for you.Originerd– Originerd2016-09-08 05:31:59 +00:00Commented Sep 8, 2016 at 5:31
-
Have a look at react-native-scalable-imageIhor Burlachenko– Ihor Burlachenko2018-01-18 14:31:16 +00:00Commented Jan 18, 2018 at 14:31
Add a comment
|
4 Answers
Use resize mode cover and set the width to ScreenWidth / 2 you can retrive the screen width using Dimensions component
//Get screen width using Dimensions component
var {width} = Dimensions.get('window');
//....
//In image style
image:{
width: width * 0.5
}
//In render function
<Image resizeMode = 'cover' style = {styles.image}/>
Edit adding overflow
//add overflow : visible
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/>
3 Comments
manpenaloza
thank you, so for now this at least let's me have the correct width. When just passing a width style-property to the image, the whole image seems to collapse and does not apply any height values to the image. if i pass some height property manually, it works just fine. as i don't want to have a fixed height on each image, is there some workaround to have it "really responsive" by just applying this width? I set up some RN playground with border helpers and already including your solution here
LHIOUI
adding
overlow : visible to style will solve the problemmanpenaloza
never would have figured that out that this was an overflow problem, thank you!
This code worked for me
<Image
style={{width: '100%', height: 100}}
resizeMode={'center'}
source={{}}
/>
Comments
Local images can be rendered without giving a fixed width and height but, for remote images you must provide dimensions as react-native cant calculate them on runtime. So, the following works for me
<View style={styles.thumbContainer}>
<Image source={{uri: "REMOTE_IMAGE_URI}} style={styles.thumbnail} />
</View>
and apply following styles.
thumbContainer: {
width: '100%',
height: 400,
},
thumbnail: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'cover'
},
Comments
The verified answer didn't work for me but gave me a good idea.
It probably didn't work because my images are within a ScrollView.
Since images require a width and a height, my solution has been to get the width of the screen and: a) For image width: multiply screen width by % of the screen width I want my image to take. b) For image height: multiply screen width by % of the screen width I want my image to take by height/width aspect ratio.
const { width } = Dimensions.get('window');
<Image style={{ width: width * 0.5, height: width * 0.5 * 2.16 }}
source={require("everydaycheckmobile/images/introduction/5-overviewdark.png")}
/>
Works nicely, but it will be necessary to dynamically define the % of width screen you want the image to take to make it work good responsively and for various orientations.
