Custom shaped buttons on react-Native - react-native

Question

How to add custom shape buttons , for example a pentagon shaped button on react native application. Any help or input would be appreciated.

Answer 1

Here is one way to achieve it (View Snack):
export class PentagonButton extends Component {
render() {
return (
<TouchableOpacity onPress={() => { }}>
<View style={styles.pentagon}>
<View style={styles.pentagonInner} />
<View style={styles.pentagonBefore} />
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
pentagon: {
backgroundColor: 'transparent'
},
pentagonInner: {
width: 90,
borderBottomColor: 'red',
borderBottomWidth: 0,
borderLeftColor: 'transparent',
borderLeftWidth: 18,
borderRightColor: 'transparent',
borderRightWidth: 18,
borderTopColor: 'red',
borderTopWidth: 50
},
pentagonBefore: {
position: 'absolute',
height: 0,
width: 0,
top: -35,
left: 0,
borderStyle: 'solid',
borderBottomColor: 'red',
borderBottomWidth: 35,
borderLeftColor: 'transparent',
borderLeftWidth: 45,
borderRightColor: 'transparent',
borderRightWidth: 45,
borderTopWidth: 0,
borderTopColor: 'transparent',
}
});
This example is using views in different shapes to build your button. Credit to #browniefed who has made a lot of different shapes here.
Another way to solve it is using React ART wich is a great way of creating shapes in React Native. Here are the unofficial docs.