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,  
  },
});

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.