How to add a Round Image in React Native [iOS and Android]

Sometimes you may want to show an image in a round shape in your React Native app. Usually, we show images such as profile images in a circular shape. In this blog post, let’s check how to add a round image in react native easily.

Making round images in Android and iOS is easy. In You just need to style your image by giving the same value for height, width, and borderRadius.

See the following code snippet.

import {StyleSheet, Image, View} from 'react-native';
import React from 'react';
import cat from './cat.jpg';

const App = () => {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={cat} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    height: 100,
    width: 100,
    borderRadius: 100,
  },
});

export default App;

You will get the following output in iOS.

That’s how you create and display round images in react native.