Make Circular View in React Native using Border Radius

In the lifecycle of developing mobile application I came to an requirement where the application needed circular view to display Image. The hackish way implemented was admin was uploading the image with perfect circular dimension.

The app was used my more people and they started using rectangular images making the UI unfriendly. After dong some research, a way was found where if you create an square and provide radius half of the value of length, it would be a circle. I am trying to demonstrate same thing over here. Let's explore the illustration demonstrating the creation of a circular image view in React Native using border-radius.

Let's begin with an example to create circular image view from the following code:

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

const CircularImgView = ({ imageUri }) => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: imageUri }}
        style={styles.circularImgView}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  circularImgView: {
    width: 150,
    height: 150,
    borderRadius: 75, // Half of width and height to make it circular
  },
});

export default CircularImgView;

Let's see usage of this code:

<CircularImgView imageUri="https://yourserverurl.com/profilePic.png" />

Now, let's see the Circular TextView:

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

const CircularTxtVw = ({ text }) => {
  return (
    <View style={styles.circularTextView}>
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  circularTextView: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black',
  },
});

export default CircularTxtVw;

So let's use above code :

<CircularTxtVw text="Hello" />

I hope this example will give clarity on how to create Circular View using square and borderRadius which is half of the one length of side of the square.