Categories
JavaScript Answers React Native Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *