How to create a one side skewed custom button component in react native

Question

I want to create a custom react native button which is skewed one side. I have referred so many articles but neither of then doesn't solved my requirements. Here is the sample of the button looks like. One button skewed left and other button skewed right.

Here is the buttons looks like.

One side skewed button example 1

One side skewed button example 2

Anybody please help me to create this button.

Answer 1

It is possible to create a skewed button by adding some style. Try this style.

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const App = () => {
  return <View style={styles.button} />;
};

const styles = StyleSheet.create({
  button: {
    width: 250,
    height: 0,
    borderTopWidth: 100,
    borderBottomColor: "red",
    borderLeftWidth: 0,
    borderLeftColor: "transparent",
    borderRightWidth: 50,
    borderRightColor: "transparent",
    borderStyle: "solid",
  },
});

export default App;