The text component directly supports the Border using style. There is no need to wrap the Text component in any type of View to apply the border, We can directly apply the border on it. So here is the complete step by step tutorial for Show Border Around Text Component inside Text in both Android iOS application in react native.
Contents in this project Show Border Around Text Component in React Native Android iOS App :
1. Import StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
|
2. Create a Parent View in render’s return block. This would be our main View.
|
1
2
3
4
5
6
7
8
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Create a Text component inside Parent View and call the TextComponentStyle on it.
|
1
2
3
4
5
6
7
8
9
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}>Showing Border Around Text Component.</Text>
</View>
);
}
|
4. Now finally we would make the CSS classes for both Parent 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
31
32
33
34
35
36
37
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextComponentStyle: {
borderRadius: 5,
// Set border width.
borderWidth: 2,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
// Setting up Text Font Color.
color: ‘#fff’,
// Setting Up Background Color of Text component.
backgroundColor : ‘#CDDC39’,
// Adding padding on Text component.
padding : 2,
fontSize: 20,
textAlign: ‘center’,
margin: 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
export default class App extends Component<{}> {
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.TextComponentStyle}>Showing Border Around Text Component.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextComponentStyle: {
borderRadius: 5,
// Set border width.
borderWidth: 2,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
// Setting up Text Font Color.
color: ‘#fff’,
// Setting Up Background Color of Text component.
backgroundColor : ‘#CDDC39’,
// Adding padding on Text component.
padding : 2,
fontSize: 20,
textAlign: ‘center’,
margin: 10
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Create Blur Background Image Effect in Android iOS App
React Native Combine Two Strings Into One Using concat() Function
Set Background Color of Root View in React Native App Activity
IF-Else & Nested IF-Else conditional statement in React Native example
RNCSafeAreaView was not found in the UIManager React Native iOS Error Solution
