How to auto-scale an svg to fit a flexbox

How to / Third Party Tooling
1

Hi,

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" />
         </Svg>
    </View>
    <View flex={4} backgroundColor={'green'}>
    </View>
</View>

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!

Thanks