I have a logo I want to put in the middle of the screen but after defining the dimensions of the logo, it seems doing resizeMode='contains' doesn't behave like it should.
If I use resizeMode='contain', my screen appears with the image overextending the page. I could just use resizeMode='center' to make it appear in the center like this but I'd like to know why contain doesn't seem to work. I've tried adjusting the width and height of the logo dimensions but I keep getting the same result.
I'm using Expo Go on Android to display the screen, and React Native v0.68.2.
my code:
import {View, Text, Image, StyleSheet, useWindowDimensions} from 'react-native';
import Logo from '../../../assets/images/logo.png';
import CustomInput from "../../components/CustomInput";
const SignInScreen = () => {
const {height} = useWindowDimensions();
return (
<View style={styles.root}>
<Image
source={Logo}
styles={[styles.logo, {height: height * 0.3}]}
resizeMode='center'
/>
<CustomInput/>
</View>
);
};
const styles = StyleSheet.create({
root: {
alignItems: 'center',
padding: 20,
},
logo: {
width: '70%',
maxWidth: 300,
maxHeight: 100,
},
});
export default SignInScreen;
edit 1: I managed to get the logo to not cover the whole screen. But when I try adjusting the proportion the logo takes of total screen height like user DhavalR suggested or passing resizeMode in style suggested by user Bhavya Koshiya, it doesn't affect the size of the image and just stays constantly like this.
what I changed the code to:
<Image
source={Logo}
style={[styles.logo, {width: height * 0.4, height: height * 0.4, resizeMode: "contain"}]}
// resizeMode="contain"
/>
the only thing now that works to adjust the size of the logo on my screen is if I used this:
<Image
source={Logo}
style={[styles.logo, {width: 150, height: 200}]}
resizeMode="contain"
/>
But only changing the number for width makes the logo bigger/smaller, and height doesn't seem to do anything. I'm still unsure why height: height * 0.3 doesn't work.
Resize mode contain
Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
You can read more about that here resizeMode
In Your case you give height * 0.3 it take total screen heigth of 30%.
considering your image does not have padding around, I think this should make it look like your expected result
pass resizeMode in style instead as a prop
<Image
source={Logo}
styles={{ width: width * 0.6, height: width * 0.6, resizeMode: 'contain' }}
/>
const styles = StyleSheet.create({
root: {
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
});
Related
I'm trying to keep the layout height to be the same on different devices
This is my code:
import React from 'react';
import { View, Dimensions } from 'react-native';
class App extends React.PureComponent {
render() {
let height = Dimensions.get("window").height;
let box1_height = height - 128;
let box2_height = 64;
let box3_height = 64;
return <>
<View style={{ height: box1_height, backgroundColor: "blue" }}></View>
<View style={{ height: box2_height, backgroundColor: "red" }}></View>
<View style={{ height: box3_height, backgroundColor: "green" }}></View>
</>
}
}
export default App;
And this is how it looks on my Galaxy S7 device:
As you can see, The red and the green box got the same height
But on my Pixel 7 device, there is a white gap under the green box:
I added box1_height + StatusBar.currentHeight
It fixed the white gap on Pixel 7 device
but the green box moved down on Galaxy s7
How do I keep the layout to be the same on different devices?
If you don't need an exact height for the blue part, you can use flexbox like this:
<View style={{ flex:1, backgroundColor: "blue" }}></View>
<View style={{ height: box2_height, backgroundColor: "red" }}></View>
<View style={{ height: box3_height, backgroundColor: "green" }}></View>
the blue part will fill all the available space and the red and green ones will keep their size
I have an image viewer box in my app box has the size 300px x 300px when I set the image in it and the image has the width and height 100% of this box now I set it resizeMode: 'contain' every image shows in the center of this box, but I need it to show the image in the corner of the box
<View style={{
width: 300,
height: 300
}}>
<Image
source={item.img_url}
style={{
width: '100%',
height: '100%',
resizeMode: 'contain'
}}
/>
</View>
Check this attachment the logos of companies have the same height but the width is different and the image is always in the corner I need something like this in my scenario.
Images are rendered in different aspects in ios and android using image component from react-native. I’m trying to display image with 45 degree angle cutoff every corner.
I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.
Center does not crop the image but if the image isn’t similar ratio as the view the 45 degree angles aren’t cut of the image, Android does this well though.
<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
<View style={styles.imageWrapView}>
<Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />
</View>
<View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />
</View>
Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.
Here are the images rendered on ios using center and cover
This is rendered using contain on ios
How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?
if you set overflow to hidden the border radius will start working again
borderRadiusFix:{
borderRadius: 5,
overflow: 'hidden',
}
same problem are occure with me. In my case borderRadius are working for android but not working for ios so i followed the folloowing code....
This is my styling item for Touchable button you can use Image in place...
<View style = {styles.button}>
<TouchableOpacity >
<Text style={{textAlign:'center',color:'#ffff'}}>
Login
</Text>
</TouchableOpacity>
</View>
and my styling....
button: {
borderRadius:20,
marginTop:20,
alignSelf:'center',
textAlign:'center',
width:'70%',
height:'7%',
fontWeight:"bold",
color:'#ffff',
paddingTop:10,
backgroundColor: '#00AABF'
}
Try this
<View
style={{
width: 250,
height: 150,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
overflow: 'hidden'
}}
>
<Image
source={{ uri: imageUri }}
style={{
width: 250,
height: 150
}}
/>
</View>
You can use following props for 45-degree angle cutoff every corner.
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
I'm having an issue in Android when adding elevation to a View.
As we can see, in the first example, the shadow casted by adding elevation is the same size for both rectangles. In the second example however, the shadow for the grey rectangle is bigger than the shadow for the blue rectangle.
The styling is exactly the same, however the only difference is the size of the rectangles.
(written in React Native)
Rectangle A:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 140, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 140, height: 60, backgroundColor: "#00aeef"}} />
</View>
Rectangle B:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 220, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 60, height: 60, backgroundColor: "#00aeef"}} />
</View>
Adding a shadow to a parent component is not a solution since the component are not the same height. In such a case shadow will be visible above the blue component, and it just doesn't look right.
Also increasing the value of elevation of the blue rectangle is not a solution, since increasing the value of elevation spreads the shadow, making it less visible.
Any ideas how I can make the shadows look alike when both the component have different sizes?
React-Naive suggests developers to state image dimension before runtime. I know this is a good practice. My question is... How about if I want to resize an <Image> to the same width as its contained <View> with unknown width?
For example, I have an <Image> in a <View> with rowDirection: 'row', flex: 0.8. In different device I have different screen width. How do I know the actual width of 80% of the device?
P.S. I have tried all resizeMode but no luck.
Can anyone help me thanks!
UPDATE 1
I have tried this snippet
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
<Image
source={require('../resources/images/side-menu-header.png')}
style={{ width: null, height: null, flex: 0.8 }} />
<View style={{ flex: 0.2 }} />
</View>
Result image of above code
However, yes, this image is now set to 0.8 in width, but some its area has been cropped. This is not what I want to get. Therefore, I set its resizeMode to contain as below snippet
<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
<Image
resizeMode='contain'
source={require('../resources/images/side-menu-header.png')}
style={{ width: null, height: null, flex: 0.8 }} />
<View style={{ flex: 0.2 }} />
</View>
Result image of above code
This is not what I expected too! As you see, the image is now become 0.8 in width and the whole image is shown, but the top and bottom space is occupied by its original dimension. (The Original image dimension is large)
I think I can simplify this question in few words: How do I show a full width image in my app? I cannot set its width to 1080 since not all device has a width of 1080 pixel.
Use Dimensions API for making image size dynamic.
Sample code:
const { width, height } = Dimensions.get('window');
<Image
source={{uri: `${url}`}}
style={{ width: width * 0.8, height: height * 0.8 }}
/>
The width * 0.8 and height * 0.8 is the 80 percentage for your screen size width and height respectively.
As far as i'm concerned, what you need is a api to get the size of device.
Try Dimensions, use like this:
let {height, width} = Dimensions.get('window');
Pass a width and height of null to the style prop, like so:
<Image resizeMode='cover' source={{ uri: 'image.png' }} style={{ width: null, height: null, flex: 0.8 }} />