Stack Masked View to Make Curved Card React Native - reactjs

Question

Anyone know how to make card like this using view only?
desired result
Currently I'm still using SVG combined with view, but I'm curious if this result can be achieved using view only method.
I've searching about masked-view in react native using this library
https://github.com/react-native-masked-view/masked-view
but I have a gradle issue when I'm trying to build the app.
And apparently this issue hasn't solved yet.
https://github.com/react-native-masked-view/masked-view/issues/89
Current Result using SVG
current result
Component :
<View style={styles.card}>
<Image
source={{
uri:
'https://media.istockphoto.com/vectors/flat-cityscape-with-blue-sky-white-clouds-and-sun-modern-city-skyline-vector-id931139544?s=612x612',
}}
style={[
styles.cardImage,
{
justifyContent: 'center',
marginTop: 0,
resizeMode: 'cover',
},
]}
/>
{/* <View style={[styles.cardImage, {}]} /> */}
<View
style={{
position: 'absolute',
bottom: 60,
}}>
<SvgExclude color={'#FFF'} />
</View>
<View style={[styles.cardDescription, {}]}>
<Text>
Kota Indonesia dan Keunikannya
</Text>
</View>
</View>
Style :
const styles = StyleSheet.create({
card: {
marginTop: 16,
width: windowWidth - 32,
marginHorizontal: 16,
backgroundColor: '#FFF',
height: 179,
borderRadius: 16,
elevation: 2,
overflow: 'hidden',
},
cardImage: {
width: '100%',
height: 134,
backgroundColor: 'black',
position: 'absolute',
top: 0,
},
cardDescription: {
height: 60,
width: windowWidth - 32,
borderBottomEndRadius: 16,
borderBottomStartRadius: 16,
borderTopEndRadius: 16,
backgroundColor: '#FFF',
position: 'absolute',
bottom: 0,
padding: 12,
},
});
SVG :
import * as React from 'react';
import Svg, {Path} from 'react-native-svg';
function SvgExclude(props) {
return (
<Svg
width={16}
height={16}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M0 0c0 8.837 7.163 16 16 16H0V0z"
fill={props.color}
/>
</Svg>
);
}
export default SvgExclude;
Thankyou..

Answer 1

I tried it on snack please have a look at it. I'm using View only for this design.
import * as React from 'react';
import { View } from 'react-native';
export default function App() {
return (
<View style={{
alignSelf:'center',
marginTop:100
width:300,
height:250,
backgroundColor:'red',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
borderRadius:10
}}>
<View style={{
position:'absolute',
bottom:0,
height:100,
width:'100%',
backgroundColor:'white',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.5,
shadowRadius: 13.84,
elevation: 10,
borderBottomLeftRadius:10,
borderBottomRightRadius:10,
borderTopRightRadius:10,
}}>
<View style={{
position:'abolute',
backgroundColor:'red',
top:0,
width:'100%',
height:20,
borderBottomLeftRadius:20
}}>
</View>
</View>
</View>
);
}