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 :

Trapezoid

Screenshot in iOS device:

Trapezoid

6 Comments

  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:

    http://bennettfeely.com/clippy/

    -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.

    http://www.math.ucla.edu/~ronmiech/Calculus_Problems/32A/chap11/section4/708d19/IMG00004.GIF

    http://s3.amazonaws.com/magoosh-company-site/wp-content/uploads/sites/2/2013/12/22135509/arpwea_img1.jpg

Leave a Reply

Your email address will not be published.