How to auto-scale an svg to fit a flexbox


Really struggling to always have my svg components in a surrounding view. It keeps cutting parts of it off. Is there any way to autoscale to fit?

<View style={styles.container}>
    <View flex={1}>
         <Svg viewbox="-450 -450 500 500" height={100} width={100}>
             <Svg.Circle cx={50} cy={50} r={500} fill="#f1c40f" />
    <View flex={4} backgroundColor={'green'}>

Like that so the svg autoscales to the size of the top View - probably just a lack of experience but really struggling so any help would be great!