How to create circle images in React Native

Last updated on October 23, 2020 A Goodman Loading... Post a comment

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

Example

The code:

import React from 'react';
import {View, StyleSheet, Image} from 'react-native';

const IMG_URI =
  'https://cdn.pixabay.com/photo/2020/05/26/15/42/eagle-5223559_960_720.jpg';

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

/// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  // styling the image
  image: {
    width: 300,
    height: 300,
    borderRadius: 1000, //// a very high number like 500, 1000, 10000
  },
});

export default App;

Perform the snippet above and see the result on your machine 😉 😉

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles