How to design React-Native Button - react-native

Question

I am new to react-native and I want to design such a button, I tried and searched but could not find an answer
any help would be appreciated

Answer 1

Look at this aproach, with radiusBorder you can achieve something close to you're looking for:
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
export default function NAME() {
return (
<TouchableOpacity>
<View style={styles.wrapperContainer}>
<View style={styles.Container}>
<Text>Foo</Text>
</View>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
Container: {
height: 50,
width: 100,
alignItems: 'center',
background: '#1f90f0',
borderRadius: 5,
justifyContent: 'center',
borderTopLeftRadius: 50,
borderLeftWidth: 2,
borderLeftColor: 'lightgray'
},
wrapperContainer: {
background: 'lightgray',
width: 100,
}
});

Answer 2

You can create a custom button in react-native by using TouchableOpacity and if you want to perform any function when the user press that button you can use onPress prop.
import React from 'react';
import {TouchableOpacity, View, Text} from 'react-native';
const FunctionName = () => {
return(
<View>
<TouchableOpacity style={styles.buttonStyling}>
<Text>Button Name</Text>
</TouchableOpacity>
</View>
);
}
export defaultFunctionName;

Answer 3

Use TouchableOpacity instead. That way you can customize the button however you want it to be.
https://reactnative.dev/docs/touchableopacity
import React from 'react';
import {TouchableOpacity, View, Text} from 'react-native';
export default function NAME() {
return(
<View>
<TouchableOpacity style={{padding: 10, borderWidth: 1, borderColor: '#000'}}>
<Text>Text goes here</Text>
</TouchableOpacity>
</View>
);
}
Edit: This is the closest I got for what you are looking for.
import React from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
export default function NAME() {
return (
<TouchableOpacity>
<View style={styles.Container}>
<View style={styles.ButtonShape} />
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
Container: {
backgroundColor: 'transparent',
},
ButtonShape: {
borderLeftWidth: 20,
width: 120,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderTopColor: 'blue',
borderTopWidth: 50,
},
});