Make Circular Image in React Native using Border Radius

This tutorial explains how to create circular Image in React Native using Border Radius. We are going to use Image component and rounded image can be achieve easily using Style’s borderRadius.

How to create a circle image in React Native

Lets follow the below steps to create circular Image in React Native using Border Radius.

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 { StyleSheet, View, Image, Text } 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 Project extends Component {

  render() {
    return (
      <View style={styles.Container}>

        <Image
          source={{ uri: 'https://imagizer.imageshack.com/img924/9084/H33H0z.jpg' }}
          style={styles.circleImageLayout}
        />
        <Text style={styles.text}>Robert Downey Jr.</Text>

      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  Container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },
  circleImageLayout: {
    width: 200,
    height: 200,
    borderRadius: 200 / 2
  },
  text: {
    fontSize: 25,
    textAlign: 'center',
    margin: 30
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to  create circular Image in React Native using Border Radius.

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


export default class Project extends Component {

  render() {
    return (
      <View style={styles.Container}>

        <Image
          source={{ uri: 'https://imagizer.imageshack.com/img924/9084/H33H0z.jpg' }}
          style={styles.circleImageLayout}
        />
        <Text style={styles.text}>Robert Downey Jr.</Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    margin: 10
  },
  circleImageLayout: {
    width: 200,
    height: 200,
    borderRadius: 200 / 2
  },
  text: {
    fontSize: 25,
    textAlign: 'center',
    margin: 30
  }
});

Screenshot :

This is all about Make Circular Image in React Native using Border Radius. 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.