How to Create Custom Triangle Shape View in React Native

In this tutorial we are going to discuss how to create custom triangle design in react native application. Design & implementation of triangle shape is very easy and here we are going to use css stylesheet design for this. Lets follow the below steps and build more understanding.

React Native Triangle With Border :

Lets follow the below steps to Create Custom Triangle Shape design in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

Step-4 : Implement render method inside the App class and wrapped the below layout design inside the root View component.

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}> Triangle Shape </Text>
        <View style={styles.triangleShape} />
      </View>
      );
  }
}

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  triangleShape: {
    width: 0,
    height: 0,
    borderLeftWidth: 70,
    borderRightWidth: 70,
    borderBottomWidth: 140,
    borderStyle: 'solid',
    backgroundColor: 'transparent',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#f50057'
  }

});

Complete Source Code for App.js 

Lets see the complete source code that helps to Create Custom Triangle Shape design in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}> Triangle Shape </Text>
        <View style={styles.triangleShape} />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  triangleShape: {
    width: 0,
    height: 0,
    borderLeftWidth: 70,
    borderRightWidth: 70,
    borderBottomWidth: 140,
    borderStyle: 'solid',
    backgroundColor: 'transparent',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#f50057'
  }

});

Screenshot :

This is all about Custom Triangle Shape design in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.