How to create one circular image in React Native

Introduction :

A circular image is required in many places like a profile picture, album cover etc. It is pretty easy to create in react native. If you know how to add one image component, then you can simply jump to the code. I will show you how to make one image circular, how to add one border with width and color in React Native.

Step 1: Create one basic React Native project :

I am creating one basic React native project using npx react-native init SampleProject.

Update the App.js file as like below :

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View
} from 'react-native';


const App = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
       <View style={styles.container}>
       </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center"
  },
  textInput: {
    width: "90%",
    height: 50,
    borderColor: 'black',
    borderWidth: 2
  }
});

export default App;

It has one empty View. We will add the Image inside it.

Step 2: Add one Image :

1. Add Image in the import list of react-native.
2. Add one Image with an uri inside the View component :

<Image source = {{uri: "https://picsum.photos/200/300"}}/>

Run it. It will not show you the image because we haven’t added any style to it.

3. Add width and height to the Image :

<Image style = {{width: 200, height: 200}} source = {{uri: "https://picsum.photos/200/300"}}/>

It will create one image with height and width as like below :

4. To make this image circular, add one borderRadius. It should be half of the width and height.

<Image style = {{width: 200, height: 200, borderRadius: 200/2}} source = {{uri: "https://picsum.photos/200/300"}}/>

Output :

5. Finally add one border with a border color using borderColor and borderWidth props :

<Image
    style={{
        width: 200,
        height: 200,
        borderRadius: 200 / 2,
        borderColor: 'gray',
        borderWidth: 2,
    }}
    source={{uri: 'https://picsum.photos/200/300'}}
/>

Result :