How to Create Custom Triangle Shape View in React Native

Triangle shape view also known as Pyramid View is very important in educational applications, where developer needs to explain all the triangular formulas. So in this tutorial we would going to create a 2-D Triangle Shape using custom CSS Style in both Android and iOS applications šŸ™‚ .

Contents in this project MakeĀ Triangle Shape View in React Native :

1. ImportĀ StyleSheet andĀ View component in your class.

2. Create a Root Parent View in render’s return block, This is the Main container View.

3. Now create a View inside the Root View and Call theĀ TriangleShapeCSS class in this View.

4. Create CSS classes named asĀ container for Root View andĀ TriangleShapeCSS for Triangle View.

5. Complete source code forĀ App.jsĀ File :

Screenshot in Android application :

Triangle Shape View

Screenshot in iOS application :Ā 


  1. Gr8 job

  2. Hi,
    Can u please tell me how to design octagon text input in react-native

  3. can i give
    borderLeftWidth: 60,
    borderRightWidth: 60,
    in percentage, please reply

Leave a Reply

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