<Image
style={{
alignSelf: 'center',
flex: 1,
width: '25%',
height: null,
resizeMode: 'cover',
borderWidth: 1,
borderRadius: 75,
}}
source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
resizeMode="stretch"
/>
https://snack.expo.io/rJCoC9S5-
How would i make the image width 25% of the parent, and the height to whatever that is needed to maintain the original width:height aspect ratio?
You can edit the style of your image like this:
<Image style={style.image} source={require('.....')} />
const style = StyleSheet.create({
image: {
height: 80,
width: 80,
resizeMode: 'contain'
}
});
contain is what you are looking for. But there are more options like strech and cover.
Aspect Fill in iOS and Center Crop in Android by these lines of code.
image: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain'
}
Related
Below are my experimental result. Does those seems right?
minHeight in percent is not working correctly like in Web, is there any workaround about it?
#--- flexDirection = column; React Native Version = 0.68.4 ;
minHeight always cross height and maxHeight.
minWidth always cross width and maxWidth.
flex will not cross maxHeight.
alignSelf=stretch will not cross width.
flex/%height/%maxHeight only be used if height keyword present in container.
alignSelf=stretch/%minWidth/%width/%maxWidth only be used if width keyword present in container.
for primary axis(here column) %minHeight is not working correctly. need to use number value only.
for secondary axis (here row) all /%minWidth/%width/%maxWidth works.
---#
Thanks in advance.
N.B: Sample code
// I applied on every elements below styles
// margin: 0,
// padding: 0,
// borderWidth: 0,
// borderRadius: 0,
// left: 0,
// top: 0,
// backgroundColor: 'transparent',
// overflow: 'hidden',
<>
<View
style={{
width: 200,
height: 300,
backgroundColor: 'red',
}}
onLayout={(e) => {
console.log('Main: ', e.nativeEvent.layout);
}}
>
<View
style={{
//see image 1
flex: 1,
minWidth: 150,
width: '50%',
maxWidth: 120,
minHeight: 120,
height: '50%',
maxHeight: 192,
backgroundColor: 'green',
//removed previous code and changed to below. see image 2
// flex: 1,
minWidth: 150,
width: '50%',
maxWidth: 120,
// minHeight: 120,
minHeight: '40%',
height: '50%',
// maxHeight: 192,
backgroundColor: 'green',
}}
onLayout={(e) => {
console.log('AfterMain: ', e.nativeEvent.layout);
}}
>
</View>
</View>
</>
image 1
image 2
I am setting my background image, which stretches the full width of the screen. How can I scale the image for smaller devices and still keep it centered?
<ImageBackground
source={{ uri: `${backgroundImage?.url}?width=${windowWidth}` }}
style={styles.imageBackground}
imageStyle={styles.imageStyle}
>
imageBackground: {
width: '100%',
height: '100%',
},
imageStyle: {
resizeMode: 'contain',
width: '80%',
left: 20,
top: 40,
alignItems: 'center',
justifyContent: 'center',
display: windowWidth < 380 ? 'none' : 'flex',
},
I have a problem with positioning my image inside a container and that is when I give image position: absolute and top property image got cropped from the top here's the issue:
here's my code:
<View style={styles.OurTherapistsContainer}>
<View style={styles.therapistCard}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/img/leong.png')} />
</View>
</View>
</View>
...
therapistCard: {
width: 150,
height: 150,
borderRadius: 25,
borderWidth: 1,
borderColor: '#DFEEFF',
overflow: 'hidden',
},
imageContainer: {
width: 150,
height: 150,
backgroundColor: 'red',
},
image: {
width: '100%',
height: '100%',
position: "absolute",
top: 30
}
how can I fix this?
Try using resizeMode in image style like
resizeMode:'contain'
set resizeMode to cover
<Image style={styles.image} resizeMode="cover" source {require('../assets/img/leong.png')} />
i am using this module for displaying blur image. My question is blur is applied to bottom of the image. This issue is faced in Android but iOS working fine.
Please follow this issue in GitHub:- enter link description here
Here is the screenshots:-
Android:-
iOS:-
<View style={styles.container}>
<Text>Hi, I am some unblurred text</Text>
<Image source={{ uri: 'https://picsum.photos/200/300' }} style={styles.img} />
<BlurView style={styles.blur} blurType="light" blurAmount={10} />
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
position: 'relative',
zIndex: 1
},
img: {
flex: 1,
position: 'relative',
height: '100%',
zIndex: 2,
width: '100%'
},
blur: {
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
height: '30%',
zIndex: 3
}
});
Hi, Just a case of styling each of the elements, in this case, its 30% high, but you can alter that figure on your project to be 50% or whatever you need it to be.
Hope this helps.
I want to create a rounded image with a border. If I add borderColor: 'green', borderWidth:1, border is visible only in top left part of the rounded image.
<TouchableHighlight
style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}
>
<Image source={{ uri:"https://www.t-nation.com/system/publishing/articles/10005529/original/6-Reasons-You-Should-Never-Open-a-Gym.png" }} style={styles.profileImg} />
</TouchableHighlight>
export default styles = StyleSheet.create({
profileImgContainer: {
marginLeft: 8,
height: 80,
width: 80,
borderRadius: 40,
},
profileImg: {
height: 80,
width: 80,
borderRadius: 40,
},
});
overflow: 'hidden' for images container solves this issue.
Use the following styling, it's work for me.
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}
Worth to mention for Android...
I had to specifically set resizeMode="cover" for the borderRadius to take effect.
<Image
style={styles.image}
source={source}
resizeMode={"cover"} // <- needs to be "cover" for borderRadius to take effect on Android
/>
const styles = StyleSheet.create({
image: {
width: 150,
height: 150,
borderColor: 'red,
borderWidth: 2,
borderRadius: 75
},
});
Border width adds up to the size of the component that you added to. This makes your image bigger than the size of your container component. To solve this issue you can add the border width to the component sizes.
Example
const styles = StyleSheet.create({
profileImgContainer: {
marginLeft: 8,
height: 82,
width: 82,
borderRadius: 40,
borderWidth: 1
},
profileImg: {
height: 80,
width: 80,
borderRadius: 40,
},
});
If you want to show the image with rounded corner and with resizeMode={'contain'} to show the full image then wrap the image inside a view and then give border radius to the view. it will work
<View style={styles.carImageHolder}>
<Image
source={{
uri: each?.usercar_details?.car_model?.sized_photo,
}}
resizeMode={'contain'}
style={styles.carImage}
/>
</View>
and the style part
carImage: {
width: '100%',
aspectRatio: 1 / 1,
},
carImageHolder: {
width: '28.3%',
aspectRatio: 1 / 1,
backgroundColor: '#d8d8d8',
borderRadius: 25,
overflow: 'hidden',
},
The answers given here, are nice, but, from my experience, it's better to use percentages of your available screen height, as the width and height dimensions of image. This will help a lot with responsiveness. Do it like this
import RN from 'react-native';
const SCREEN_HEIGHT = RN.Dimensions.get('window').height;
Then apply the following as the dimensions styling, to get a nice, responsive rounded image.
style={[
//... your other previous styles
{
resizeMode: 'cover',
width: SCREEN_HEIGHT * 0.15,
height: SCREEN_HEIGHT * 0.15,
borderRadius: (SCREEN_HEIGHT * 0.15)/2,
}
]}
The (*0.15 i.e 15% of screen height) is just my choice of sample dimensions, you can use higher or lower, depending on how big you want your image to be.