Images aren't visible after setting height and width (React Native)

Question

I am following a tutorial on React Native, and currently it teaches about using Images in React Native using <Image /> tag. I am doing a follow-on for the same. My original image is quite large, so I was trying to set a height and width to display it modestly. It is a local image, so the properties should work properly, however that isn't the case.

import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'

const GameOverScreen = (props) => {
  return (
    <View style={styles.screen}>
      <View>
        <Text>The Game Is Over!</Text>
        <Image source={require('../assets/game_over.jpg')} style={styles.image} />
        <Text>No.of Rounds taken to complete the game: {props.roundsTaken}</Text>
        <Text>User number was: {props.userNumber}</Text>
      </View>
    </View>
  )
}

export default GameOverScreen

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  image: {
    width: '50%',
    height: 300,
  }
})

When I delete the style attribute in the Image tag, the whole image is visible (totally out-of-bounds from all sides), but when I put back the styles attribute, there is a blank space where the image should be supposedly displayed. Why is this happening? And what is the workaround for this? Help appreciated!

Answer 1

The problem with changing the width and height of an image manually is that you will cut out parts of the image. What you're really trying to do is change the scale of the image, while keeping the same width to height ratio of the image.

This is how you do it below

image: {
   transform:[
     {scale:.8}
   ]
 }

This will scale the image down from 1 to .8. Heres a full example (https://snack.expo.dev/5ak_qrv9w)