Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference:
The basic structure is in place, but hitting a wall when attempting to curve the center of the view from the left side inward, as depicted in the first image. Despite trying multiple methods, unable to replicate the desired outcome.
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({});`