How to Create Custom Trapezoid Shape View in React Native

A Trapezoid is a combination of a pair of parallel sides and both angles coming from a parallel side are equal, and the sides that are not parallel are equal in length known as Trapezoid. So in this tutorial we would going to create a react native Android iOS app with Custom Trapezoid Shape View using CSS Style.

Contents in this project Create Custom Trapezoid Shape View in React Native :

1. Import StyleSheet and View component in your project.

2. Create a Root View in render’s return block and inside it crate another View which is used to show Trapezoid.

3. Now finally we would create 2 CSS classes for Root View and Trapezoid View.

4. Complete source code for App.js File :

Screenshot in Android device :


Screenshot in iOS device:



  1. How do i make a view which has slope, a rectangle which has left side height is max than right side height, And that view also containing the buttons. Actually i want to make it for the footer in the app.

  2. Yes. It is kind of polygon shape, here is the sample clip-path for the shape:

    -webkit-clip-path: polygon(0 57%, 100% 6%, 100% 95%, 0% 100%);
    clip-path: polygon(0 57%, 100% 6%, 100% 95%, 0% 100%);

  3. I want to make square for footer tab with icons inside. But having little slide or we can say the square is rotated -3 degree or make left side height less than right side height.

Leave a Reply

Your email address will not be published. Required fields are marked *