i am facing issue in vurving the view in react native from a side to inwards

Issue

I'm currently working on a design project and facing a challenge in achieving a specific curve effect. I have attached two images for reference:

The Desired Design:

My Current Progress:

As you can see, I have successfully created a basic structure, but I'm struggling to curve the center of the view from the left side inwards, as shown in the first image. I have tried various approaches, but none seem to produce the desired effect.

    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({});`

Solution

you can do like this

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

const img = 'https://letsenhance.io/static/66c1b6abf8f7cf44c19185254d7adb0c/28ebd/AiArtBefore.jpg';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#1E9E64',padding: 8}}>
      <View
        style={{ flexDirection: 'row', backgroundColor: '#fff', alignItems: 'center', marginHorizontal: '2%', borderRadius: 20, height: 60}}>
        <View
          style={{ borderRadius: 150, borderWidth: 10, marginHorizontal: 15, overflow: 'hidden', borderColor:'#1E9E64'}}>
          <Image
            source={{ uri: img }}
            style={{ width: undefined, height: 60, aspectRatio: 1 }}
          />
        </View>
        <View
          style={{ marginHorizontal: '5%'}}>
          <Text>this the title</Text>
          <Text>this the body</Text>
        </View>
      </View>
    </View>
  );
}
 

Edit: Here is how it looks.

Answered By - hiren khatri