Javascript 我在从侧面到内部的react 中面临着推翻观点的问题

我目前正在进行一个设计项目，并面临着实现特定曲线效果的挑战.我附上两张图片供参考:

The Desired Design:个

My Current Progress:个

正如你所看到的，我已经成功地创建了一个基本的 struct ，但我正在努力从左侧向内弯曲视图的中心，如第一张图所示.我试过各种方法，但似乎没有一种能产生预期的效果.

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

    const ProfieTopCard = () => {
        return (
        <View
          style={{
           flexDirection: 'row',
           backgroundColor: 'green',
           height: '45%',
           justifyContent: 'center',
           alignItems: 'center',
           overflow: 'hidden',
           }}>
             <View
            style={{
            flexDirection: 'column',
              width: '25%',
             height: '100%',
             justifyContent: 'center',
             alignItems: 'center',
                //   backgroundColor: 'red',
             }}>
            <Image
             source={require('../../assets/test.png')}
              resizeMode="stretch"
              style={{height: '85%', width: '85%', borderRadius: 50}}
               />      
                  </View>
                 <View
                  style={{
                    flexDirection: 'column',
                      backgroundColor: '#fff',
                   borderTopRightRadius: 30,
                   borderBottomRightRadius: 30,

          width: '70%',
          height: '85%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <View
          style={{
            flexDirection: 'row',
            height: '100%',
            width: '100%',
            // backgroundColor: 'red',
          }}>
          <View
            style={{
              flexDirection: 'column',
              width: '80%',
              justifyContent: 'center',
            }}>
            <Text>hello</Text>
          </View>
          <View
            style={{
              flexDirection: 'column',
              width: '20%',
              justifyContent: 'center',
            }}>
            <Text>hello</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default ProfieTopCard;

const styles = StyleSheet.create({});`