Display circular image in react-native

Display circular image in react-native

Hi guys, In this post, we learn to display a circular image view in react-native. In this article, we are display image from URL and assign the style to image and use borderRadius style props to make Round shape image

You can see the below screenshot

As you see in the above screenshots, the image you are seeing is actually square, so let’s start with an example

1. Create a new project

react-native init ProjectName

2. Imports following components

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

In my case, I am using my old project which I had created previously

3. Code to display the circular image

<Image source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}} 
  //borderRadius props of style will help to make the Round Shape Image 
  style={{ height: 200, width: 200, borderRadius: 200 / 2}} />

As you see in the above Image component we set the URL as the source, then add style with height, width, and borderRadius to make image view Round shape, we need to set borderRadius: 200 / 2 to make image view Round shape.

4. Full page code

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

//Define a color for toolbar
global.backgroundColor = '#176abf';

export default class Home extends Component {

  constructor() {
    super();
    this.state = {
     
    }
  }

  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
       return {
         title:  'DetailsView',
         headerStyle: {
             backgroundColor: '#0570E9',
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
             fontWeight: 'bold',
         }, 
       }
    };

  componentDidMount() {
   // do API call here
  }

  render() {
    return (
      <View style={styles.container}>
       <Image
          source={{uri: 'https://www.techup.co.in/wp-content/uploads/2019/02/techup_logo_final_wb.jpg',}}
          //borderRadius props of style will help to make the Round Shape Image
          style={{ width: 200, height: 200, borderRadius: 200 / 2 }}
        />
        <Text style={styles.text}>Learn React-native app development</Text>
  </View>
    );
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    marginTop: 30,
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0250a3',
  },
});
 

If you know more about react-native image component for nice image loader then check out this post

5. Output

Thank you 🙂