How to show Rounded Corners Radius edges border on Image in React Native android iOS tutorial using borderRadius attribute used in custom style sheet.
Contents in this project Set Rounded Corners Radius Border :-
- Start a fresh React Native project. If you don’t know how then read my this tutorial.
- Add Image, StyleSheet and View component in import block.
- Create folder for image inside your project’s folder and put your image in it.
- Add View tag in render’s return block.
- Add Image tag in render’s return block inside View tag.
- Add Source attribute in Image tag and Assign image path using require.
- Create StyleSheet just above the AppRegistry.registerComponent line.
- Inside StyleSheet create two styles Container for complete View and BorderClass for Image.
- Call css class into both View and Image tag.
- Complete Source Code.
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add Image, StyleSheet and View component in import block.
|
1
2
3
|
import {
AppRegistry, Image, StyleSheet, View
} from ‘react-native’;
|
3. Create folder for image inside your project’s folder and put your image in it.
- Open your project folder for example my project name is Myproject -> Create a folder inside your project folder like i did in below screenshot name as images.
- Place your image inside images folder.
4. Add View tag in render’s return block.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View>
</View>
);
}
|
5. Add Image tag in render’s return block inside View tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View>
<Image>
</Image>
</View>
);
}
|
6. Add Source attribute in Image tag and Assign image path using require.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View>
<Image source={require(‘./images/sample_image.png’)} />
</View>
);
}
|
7. Create StyleSheet just above the AppRegistry.registerComponent line.
|
1
2
3
4
|
const styles = StyleSheet.create(
{
});
|
8. Inside StyleSheet create two styles Container for complete View and BorderClass for Image. Inside the BorderClass, borderRadius attribute is used to set the border corners and make them curved.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
BorderClass:
{
// Setting up image width.
width: 160,
// Setting up image height.
height: 160,
// Set border width.
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: ‘#F44336’,
// Set border Radius.
borderRadius: 10
}
});
|
9. Call css class into both View and Image tag.
|
1
2
3
4
5
|
<View style = {styles.MainContainer}>
<Image source={require(‘./images/sample_image.png’)} style = {styles.BorderClass} />
</View>
|
10. Complete Source Code for index.android.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import React, { Component } from ‘react’;
import {
AppRegistry, Image, StyleSheet, View
} from ‘react-native’;
export default class Myproject extends Component {
render() {
return (
<View style = {styles.MainContainer}>
<Image source={require(‘./images/sample_image.png’)} style = {styles.BorderClass} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
// Set content’s vertical alignment.
justifyContent: ‘center’,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
},
BorderClass:
{
// Setting up image width.
width: 160,
// Setting up image height.
height: 160,
// Set border width.
borderWidth: 1,
// Set border Hex Color code here.
borderColor: ‘#F44336’,
// Set border Radius.
borderRadius: 10
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot :
Also Read :
React Native Set Change Text Component Value Dynamically on Button Click
React Native Material Bottom Navigation View for Android iOS Example
React Native Create Seekbar Slider in Android iOS Example Tutorial
React Native Full Page Width Swipeable Horizontal ScrollView Android iOS
React Native Show Error Message if Image load failed Not Found on Server
