react-native - React-Native: 下の半径で画像をマスクする

Question

画像の境界線の下の半径を作成するにはどうすればよいですか?

また、画像を緑色の領域にマスクするにはどうすればよいですか?

次のコードを試しましたが、上で共有した画像の半径比を取得できません

コードを表示:

<View style={styles.wrapper}>
    <View style={styles.welcomeWrapper}>
        <View style={styles.welcomeImageWrapper}>
            <Image style={{width:'100%'}} source={require('../assets/images/test-slide.jpg')}/>
        </View>
    </View>
    <View style={{
        height: 100,
        backgroundColor: colors.white,
        justifyContent: 'flex-end',
        alignItems: 'center'
    }}>
       <Text style={{marginBottom:50,fontSize:18,fontFamily:'Montserrat-Regular'}}>Deneme Text </Text>
    </View>
</View>

スタイルコード:

wrapper:{
    flex:1,
    display: 'flex',
    backgroundColor:colors.white,
},
welcomeWrapper:{
    flex:1,
    justifyContent:'center',   
    backgroundColor:colors.green01,
    overflow: 'hidden',
    position:'relative',
    width:'100%',
    borderBottomRightRadius:Dimensions.get('window').width/100*50,
    borderBottomLeftRadius:Dimensions.get('window').width/100*50,
},