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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Image } from ‘react-native’;
|
2. Create a Root View in render’s return block, This would be our main layout view.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render()
{
return(
<View style = { styles.MainContainer }>
</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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render()
{
return(
<View style = { styles.MainContainer }>
<Image source={{uri : ‘/wp-content/uploads/2018/01/2_img.png’}}
style={{width: 150, height: 150, borderRadius: 150/2}} />
</View>
);
}
|
4. Create Style for View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 5,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
}
});
|
5. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Image } from ‘react-native’;
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<Image source={{uri : ‘/wp-content/uploads/2018/01/2_img.png’}}
style={{width: 150, height: 150, borderRadius: 150/2}} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 5,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
