React Native Create Round Shape Image Component in Android iOS

Round shape image component is mainly used in social chatting applications like Whats’app, Hike and Facebook in both Android and iOS applications. The rounded image can be achieve easily using Style’s borderRadius. We need to divide by 2 the total amount of width and height in borderRadius. So in this tutorial we would going to Create Round Shape Image Component in Android iOS react native app to show user profile picture.

Sample Image used in this tutorial:

Contents in this project Create Round Shape Image Component in Android iOS React Native app:

1. Import Platform, StyleSheet, View and Image component in your project.

2. Create a Root View in render’s return block, This would be our main layout view.

3. Create a Image component in Root View with width 150 pixels and height 150 pixels. We would apply the borderRadius attribute and divide the total number of width and height with 2.

4. Create Style for View.

5. Complete source code for App.js File :

Screenshot in Android device:

Create Round Shape ImageScreenshot in iOS device:

Leave a Reply

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