React Native Create Custom Rectangle Shape View

This tutorial explains how to create custom rectangle and square shape view in react native application. In Euclidean plane geometry, a rectangle is a quadrilateral with four right angles. It can also be defined as an equiangular quadrilateral, since equiangular means that all of its angles are equal (360°/4 = 90°). It can also be defined as a parallelogram containing a right angle. A rectangle with four sides of equal length is a square. The formula of finding area of rectangle is ( A = W * L ). The Square shape has the same line structure but the width and height of square is same.

React Native Rectangle Shape With Example :

Lets follow the below steps to Create Custom Rectangle 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 App.js File in your favorite 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}> Rectangle Shape </Text>
        <View style={styles.RectangleShape} />
      </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"
  },
  RectangleShape: { 
    marginTop: 20,
    width: 120 * 2,
    height: 120,
    backgroundColor: '#f50057'
   
    }

});

Complete Source Code for App.js 

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

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}> Rectangle Shape </Text>
        <View style={styles.RectangleShape} />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  RectangleShape: { 
    marginTop: 20,
    width: 120 * 2,
    height: 120,
    backgroundColor: '#f50057'
   
    }

});

Screenshot : 

DEMO
This is all about React Native Create Custom Rectangle Shape layout design. 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.