React Native Create Custom Circle Shape View

This tutorial explains how to create custom circle shape view in react native application. A circle is a simple closed shape. It is the set of all points in a plane that are at a given distance from a given point, the centre; equivalently it is the curve traced out by a point that moves in a plane so that its distance from a given point is constant. Lets follow the below steps and build more understanding.

React Native Square Shape With Example :

Lets follow the below steps to Create Custom circle 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}> Circle Shape </Text>
        <View style={styles.CircleShape} />
      </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"
  }, 
  CircleShape: {
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    backgroundColor: '#FF9800',
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to Create Custom circle 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}> Circle Shape </Text>
        <View style={styles.CircleShape} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }, 
  CircleShape: {
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    backgroundColor: '#FF9800',
  },

});

Screenshot :

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