The borderRadius style attribute dose not apply directly on Text component, So in this tutorial we would apply Add Rounded Corners Border to Text Component in React Native both iOS Android applications using View. We would wrap the Text component inside a Child View and gave the borderRadius to Child View and Put the Text inside the Child View.
Contents in this project Add Rounded Corners Border to Text Component in React Native iOS Android App:
1. Import View, StyleSheet and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
|
2. Create a Root View in render’s return block. This View is used as Parent.
|
1
2
3
4
5
6
7
8
9
10
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
);
}
|
3. Create another Child View in Root View. The child view is used as container for Text component. We would give the rounded border to this view and put the Text inside this view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render()
{
return(
<View style = { styles.MainContainer }>
<View style={styles.TextViewStyle}>
<Text style={styles.TextStyle}> Text With Rounded Border. </Text>
</View>
</View>
);
}
|
4. Create Style for Root View, Child View and Text component.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextViewStyle:
{
borderWidth: 1,
borderRadius: 10,
borderColor: ‘#E91E63’,
width: ‘80%’,
padding: 5,
backgroundColor: ‘#FFEB3B’
},
TextStyle:
{
textAlign: ‘center’,
color: ‘#000’,
padding: 10
}
});
|
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<View style={styles.TextViewStyle}>
<Text style={styles.TextStyle}> Text With Rounded Border. </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextViewStyle:
{
borderWidth: 1,
borderRadius: 10,
borderColor: ‘#E91E63’,
width: ‘80%’,
padding: 5,
backgroundColor: ‘#FFEB3B’
},
TextStyle:
{
textAlign: ‘center’,
color: ‘#000’,
padding: 10
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
Example of Creating Pre Populated SQLite Database For React Native
How to change Image border color in React Native Tutorial
React Native Create Custom Bottom Tab Bar Navigator Example
React Native Finish Current Activity Route Screen Navigate to Next using createSwitchNavigator Example Tutorial
React Native Segmented Control Tab Android iOS NPM Example
