CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
Sarath Dixit
Sarath Dixit

Reputation: 91

how I can cut border joining of a view in React native

I'm developing an app in React Native. In the app we have a gradient button with bottom-left and top-right corner cut. I have no Idea how to implement that. Provide me some example or any hints to implement this. Thanks.

enter image description here

Upvotes: 0

Views: 1319

Answers (1)

Neel Dsouza
Neel Dsouza

Reputation: 1549

You can use clip-path property which tells what part to be shown in an element using the polygon() function to create a hexagon corners. Below code should do the trick.

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#522d5b',
    clipPath: `polygon(0 0, 83% 0, 100% 20%, 100% 100%, 19% 100%, 0 79%)`
  }
});

To play around with the exact values of the corners, you can refer this link to create clip paths

Upvotes: 2

Related Questions