I have the following design:
<View style={{flexDirection: "column", justifyContent: "space-around", alignItems: "center", flex: 1}}>
<TopElement style={{position: "absolute", top:5}}/>
<Image key={1}/>
<Image key={2}/>
...
<Image key={n}/>
<BottomElement style={{position: "absolute", bottom:5}}/>
</View>
My n Images are too big to fit the wrapper container (e.g. my screen). Would it be possible to resize them (keeping aspect ratio) without touching TopElement and BottomElement current dimensions? I would like those to stick at the borders of the container.
I am not sure if there is a builtin function, if using Layout FlexBox props is the solution or maybe computing manually each Image's dimension depending on the screen height, or maybe adding another View to wrap them all...?
You can do it as below:
<View style={{flexDirection: "column", justifyContent: "space-around",
alignItems: "center", flex: 1, paddingTop: 30, paddingBottom: 30}}>
<TopElement style={{position: "absolute", top:5}}/>
<Image resizeMode="contain" style={{flex: 1}} key={1}/>
...
<Image resizeMode="contain" style={{flex: 1}} key={n}/>
<BottomElement style={{position: "absolute", bottom:5}}/>
</View>
Use paddingTop & paddingBottom on parent <View />, with height of <TopElement /> and <BottomElement />. Makes Top / Bottom won't overlap with image.
Set <Image /> prop resizeMode to 'contain'. Make image auto resize with keeping original aspect ratio.
Related
I have something like:
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{ height: 30}}>...stuff</View>
<View style={{ flexGrow: 1}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{
uri: mediaUrl,
}}
resizeMode='cover'
/>
</View>
<View style={{maxHeight: '50%'}}>...stuff</View>
</View>
So you see the bottom View adjusts based on its content, and therefore the middle one does too. The issue is the image sometimes pushes the container to not respect the third container max height.
How do I get around this?
you have to add resizeMode='cover' inside style like given below ex:
<Image
style={{
width: '100%',
height: '100%',
resizeMode='cover'
}}
source={{
uri: mediaUrl,
}}
/>
for more details => https://mehrankhandev.medium.com/understanding-resizemode-in-react-native-dd0e455ce63
my image once fitted to the screen is blurry, even though it is actually in high quality, what can I do to adapt it to the width of the smartphone without losing quality?
<View key={item[0]} style={{alignItems: 'center', justifyContent: 'center',}}>
<Image style={{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
resizeMode: "contain",
alignSelf: "center",
}} source={{uri: item[0]}} />
</View>
So I have these Views in react native I am using as cards, and I want to partially change the background of the view based on a %
So for example I would find what % 230 is of 1000 and I would fill the background of the card that % to a different color. Anyone have any suggestions on doing the background color with a % like that? I know I can fill it with border and border width but the issue is that pushes the content out of the way to fill it. I need the content to stay in place but the background color change partially based on the %. I also tried making another View overtop of this one and adding the border and border width and filling the top one, but that covers the content of the bottom one, which doesnt really help either.
Not sure a code snippet is needed for this question but screw it:
<View key={value.title + index} style={{ backgroundColor: 'white', margin: 10, borderRadius: 5, width: '90%', height: 70, alignSelf: 'center', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{ margin: 15 }}>
<IconX
size={30}
origin={ICON_TYPE.FONT_AWESOME5}
name={'piggy-bank'}
color={'black'}
/>
</View>
<View style={{ flexDirection: 'column', width: 125 }}>
<Text style={{ fontWeight: 'bold' }}>{value.title}</Text>
{value.date && (
<Text>{value.date.toDateString()}</Text>
)}
</View>
<View style={{ flexDirection: 'column', marginLeft: '-5%' }}>
<View style={{ width: 150 }}>
<Text style={{ fontWeight: 'bold', textAlign: 'right', color: '#F36A53' }}> ${value.currentAmount} / ${value.goalAmount}</Text>
</View>
</View>
</View>
</View>
I ended up just adding another card overtop of it and just using a transparent border color so it didnt cover the content, but I am not totally happy with this solution, so am open to any other answers. Thanks.
I have an image where i try to center some text on it.
For that i use ImageBackground to have child elements of the image.
However the image is being scaled down on small devices, and full size if possible
When i center my text, it gets centered after the whole image ratio ( on a big screen where you can see the whole image, its centered - on small screens its offset because some of the image is cropped to fit.
<ImageBackground style={{ width: wp('50%'),
height: hp('50%'),
resizeMode: 'cover',
justifyContent: 'center',
alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
you need to add an extra view to wrap the ImageBackground and add style property
justifyContent and alignItems to center and I think this will erase your problem.
<View style={{ flex:1 , justifyContent: 'center', alignItems: 'center' }}>
<ImageBackground
style={{ width: wp('50%'), height: hp('50%'), resizeMode: 'cover', justifyContent: 'center', alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
</View>
I am not aware of the image ratio uploaded by user upfront but I need to display all images in 4:5 ratio i.e
image width=device window width size
image height=(device window width size)*5/4
I used the above calculation for displaying my image inside container view but the image is cropped. If I use resize mode, the image is distorted.
Code:
<View style={styles.container}>
<Image style={styles.fixedRatio} source={{ uri: this.props.navigation.state.params.uri }}/>
</View>
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
fixedRatio: {
marginLeft:-10,
marginRight:-10,
backgroundColor: 'red',
flex: 1,
aspectRatio: 1,
width: deviceWidth,
height: deviceWidth*5/4
},
Edit 1:
As per #marson answer, I changed the code like below
I set background color to differentiate image. Now the images are not get cropped. But doesn't fit inside the view
<View style={{ backgroundColor: 'blue', aspectRatio:4/5, alignSelf:'center', width: '100%'}}>
<Image resizeMode={'contain'} style={{width:'100%', height:'100%'}} source={{ uri: this.props.navigation.state.params.uri }}/>
</View>
Could this work?
<View style={{
width: '100%',
aspectRatio={4.0/5.0}
}}>
<Image
style={{
width: '100%',
height: '100%',
}}
resizeMode={'contain'}
source={...}/>
</View>