How To Use Make Circular Image Using React Native?
Nov 27, 2021 . Admin
Hi Guys,
Today, I will learn you how to use make circular image example. We will check how to use make circular image. This is a short guide on use make circular image in react native. Let's get started with how to use make circular image in react native.
Here, I will give you full example for simply display make circular image using react native as bellow.
Step 1 - Create projectexpo init MyWebtutsExampleStep 2 - App.js
In this step, You will open App.js file and put the code.
import React, { Component } from "react"; import { SafeAreaView, StyleSheet, View, Image, Text } from 'react-native'; const MyWebtutsComponent = () => { return ( <View style={styles.container}> <Image source={{ uri: 'https://picsum.photos/seed/picsum/200/300', }} //borderRadius style will help us make the Round Shape Image style={{ width: 200, height: 200, borderRadius: 200 / 2 }} /> <Text style={styles.textHeadingStyle}>Nice Picture</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#e0dcdc', }, textHeadingStyle: { marginTop: 30, fontSize: 40, color: '#0250a3', fontWeight: 'bold', }, }); export default MyWebtutsComponent;Step 3 - Run project
In the last step run your project using bellow command.
npm startOutput
It will help you...