How to create circle images in React Native

Updated: February 22, 2022 By: A Goodman One comment

To create perfectly round images in React Native, just give the borderRadius property a very high value.


The code:

// App.js
import React from "react";
import { View, StyleSheet, Image } from "react-native";

const IMG_URI =

function App() {
  return (
    <View style={styles.screen}>
      <Image style={styles.image} source={{ uri: IMG_URI }} />

// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  // styling the image
  image: {
    width: 300,
    height: 300,
    borderRadius: 1000,

export default App;

That’s it. Further reading:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

1 Comment
Inline Feedbacks
View all comments
2 years ago

Better to use borderRadius as half size of the width. In the article example, it’s 150 value.

Related Articles