2주차 과제 하고 있다가 궁금한게 생겨 여쭤봅니다,,

코드스니펫을 통해 받은 이미지 파일 원본은 정사각형 모양이 맞는 것 같은데, styles에서 width와 height를 똑같은 값으로 지정해줘도 세로의 길이가 긴 직사각형 모양으로 나옵니다...

흰색 부분의 안쪽 여백이 문제일까 싶어 styles의 cardContainer 안에 있는 여백들도 건드려봤는데 그래도 계속 직사각형 모양이네요ㅠ_ㅠ....

이거랑 혹시 padding top 으로 값을 10 지정하고, 추가로 padding으로 10을 지정해줘도 두 개 모두 적용되어 top은 20, 좌,우,아래는 10의 값을 갖게 되는지도 궁금합니다 ,,ㅎㅎ

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

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


export default function AboutPage(){
const cardImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"


    return (
    <View style={styles.container}>
        <Text style={styles.title}>HI! 스파르타코딩 앱개발반에 오신것을 환영합니다</Text>
        <View style={styles.cardContainer}>
            <Image style={styles.cardImage} source={{uri:cardImage}} resizeMode={""}/>
            <Text style={styles.cardTitle}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
            <Text style={styles.cardDesc}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
            <TouchableOpacity style={styles.button}> 
                <Text style={styles.buttonText}>"IG = @Raccoon_black"</Text>
            </TouchableOpacity>
        </View>        
    </View>      
      )
}


const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#191970',
        alignItems:"center"
      },
    title: {
        fontSize: 30,
        fontWeight: '700',
        marginTop: 80,
        margin: 30,
        color:"#fff",
      },
    cardContainer:{
        width:'85%',
        height:550,
        borderRadius:30,
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:"#fff",
        marginTop:20,
        paddingTop:30,
        padding : 30,
      },
    cardTitle: {
        textAlign:"center",
        fontSize:20,
        fontWeight:"700",
        marginTop:20,
        paddingLeft:10,
        paddingRight:10,
      },
    cardDesc: {
        fontSize:15,
        fontWeight:"700",
        padding : 20,
      },
    button:{
        padding:20,
        backgroundColor:"#F5AA3F",
        borderRadius:15,
      },
    buttonText: {
        fontSize:15,
        fontWeight:"700",
        color:"#fff",
      },
    cardImage:{
        flex:1,
        width:150,
        height:150,
        borderRadius:30,
      }
})