Create multiple curve points in react native component - reactjs

Question

I am currently developing a react native app, and for my login screen it has a background that has two points where the component changes its curve. Attached is the image as it can better show what it looks like then I can explain it. I was wondering if it would be possible to recreate this screen in React Native. I have access to react-native-svg but I am using expo.
As you can see, there is two curves to the blue background/component part of the screen. (This is a mockup created in Figma, not yet implemented in an App) How would I go about designing this in react native?

Answer 1

To use SVGs you have to use react-native-svg. Expo has it built in, though you can install it in any react-native package. You can read more about react-native-svg here.
It is fairly straight forward to use the library. As you already have a path for the SVG you can just use the Path property to draw the path on the screen.
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Constants, Svg } from 'expo';
const WIDTH = Dimensions.get('screen').width;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Svg height={300} width={WIDTH}>
<Svg.Path
d="M-17.5 378.5C31.5 32.5 302.5 463 375 89C447.5 -285 375 644 375 644H0C0 644 -66.5 724.5 -17.5 378.5Z" // put your path here
fill="blue"
stroke="blue"
/>
</Svg>
<View style={{backgroundColor: 'blue', flex: 1}}>
<View style={{width: WIDTH - 60, height: 60, backgroundColor:'white', borderRadius: 30, margin: 30, justifyContent: 'center', paddingLeft: 10}}>
<TextInput
placeholder='email'
/>
</View>
</View>
</View>
);
}
}
You can see it working in the following snack https://snack.expo.io/#andypandy/svg-example
This is what it looks like on an iPhone X

Answer 2

Umm I would do this few different way such a svg (react-native-svg) but why do that much hard work when this can be achievable just using an background image.
Use ImageBackground (https://facebook.github.io/react-native/docs/imagebackground) and fix this easily. Then add the logo and the login container as children.
Let me know if this works for you. :)
EDIT:
You might want to look at https://github.com/vault-development/react-native-svg-uri as well.