How to fix it
i put
width:100,
height:100,
but i can’t able to reduce screen resolution after set "resize= ‘contain’ "attribute in “image” component
The dimensions should be strings stating the percentage. i.e. “100%”
Yes bro . I put it
After it show same
Maybe try resizeMode = “contain”
?
import React from ‘react’;
import { SafeAreaView, View,StyleSheet,Image } from ‘react-native’;
import colors from ‘…/config/colors’;
function SecondScreen(props) {
return (
<SafeAreaView style={styles.container}>
<View style={styles.color1}></View>
<View style={styles.color2}></View>
<Image resizeMode='contain' source={require('../assets/chair.jpg')} style={styles.middle}/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container:{
backgroundColor:'#000',
flex:1,
},
color1:{
width:50,
height:50,
backgroundColor:colors.primary,
position:'absolute',
top:20,
left:20,
},
color2:{
width:50,
height:50,
backgroundColor:colors.secondary,
position:'absolute',
top:20,
right:20,
},
middle:{
width:'100%',
height:'50%',
flex:1,
justifyContent:'center',
alignItems:'center',
}
})
export default SecondScreen;
my source code
can you able to find any bugs
I copied your code and pasted it into a component file – it works just fine. There are no errors in your code. Changing the percentages for width and height in styles.middle properly resize the image.
Is there something else you’re trying to do?
One other thing I noticed. The width parameter seems to have control over the size of the picture. When I change the height, it has no effect. (You can delete the height parameter and adjust the displayed picture size with just the width parameter.)
I’m sure that make sense – but I’m not experienced with manipulating images.
1 Like
How to delete height parameters
Just take the height out of the styles.middle property.