How to create CSS circles in React Native?

Sometimes, we want to create CSS circles in React Native.

In this article, we’ll look at how to create CSS circles in React Native.

How to create CSS circles in React Native?

To create CSS circles in React Native, we can set the borderRadius style to '50%'.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View
      style={{
        width: 100,
        height: 100,
        borderRadius: '50%',
        backgroundColor: 'green',
      }}></View>
  );
}

to set the width and height of the View.

Then we set borderRadius to '50%' to make it a circle.

We set the backgroundColor to add a background color to the circle.

Conclusion

To create CSS circles in React Native, we can set the borderRadius style to '50%'.