How to make round background for icon in React Native

Hi everyone, hope you all are doing great and learning something new everyday 🙂 . so today we are going to learn how can we make a round shape around a icon or text. Lets Start !!

First create a circle, for this we need height, width, radius will be half of the height and color of circle, like here is UI script.

 backgroundColor: 'lightgreen',
 height: 44, 
 width: 44, 
 borderRadius: 22  

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

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent:"center",
      alignItems:"center"
    },
    item: {
      alignSelf: "center",
      color:"white"
    },
    roundshape:  {
      backgroundColor: 'lightgreen',
      height: 44, //any of height
      width: 44, //any of width
      justifyContent:"center",
      borderRadius: 22   // it will be height/2
    }
});

const RoundBtn = () => {
    return (
      <View style={styles.container}>
          <TouchableHighlight style={styles.roundshape}>
             <Text style={styles.item}>test</Text>
          </TouchableHighlight>
      </View>
    );
}

export default RoundBtn;

Output:

Woohoo! it is done. Hope you enjoyed, Thank you 🙂