How to add a rounded image with a border with React Native?

Sometimes, we want to add a rounded image with a border with React Native.

In this article, we’ll look at how to add a rounded image with a border with React Native.

How to add a rounded image with a border with React Native?

To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles.

For instance, we write:

import * as React from 'react';
import { View, Image } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <Image
        source={{ uri: 'https://picsum.photos/200/300' }}
        style={{
          width: 150,
          height: 150,
          borderRadius: '50%',
          overflow: 'hidden',
          borderWidth: 3,
          borderColor: 'red',
        }}
      />
    </View>
  );
}

to set borderRadius to '50%' to make the Image round.

And we set the width and height of the Image to set the dimensions.

We set overflow to 'hidden' so the Image stays in the circle.

Conclusion

To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles.