Hello friends, In our previous tutorial we had learnt about Border styling. Now in today’s tutorial we would apply border on Text component in react native. We would create 4 individual Text component and apply only one side of Text border. We would use borderLeftColor and borderLeftWidth to apply border on only Left side of text component. We would use borderRightColor and borderRightWidth to apply only right side of border to Text. Same as borderTopColor and borderTopWidth to apply border to only Top side of Text and borderBottomColor and borderBottomWidth to apply border to only Bottom side of Text component. So in this tutorial we would learn about Show Add Border Only One Side of Text in React Native Android iOS Example.
Example of Show Add Border Only One Side of Text in React Native Example :-
1. Open your project’s main App.js file and import View, StyleSheet and Text component.
|
1 2 3 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; |
2. Creating our main export default App functional component class.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating 4 Text component wrapped inside View component. Now we would apply one side border on Text one by one.
|
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 |
<View style={{ backgroundColor: '#00B8D4', width: 250, height: 80, borderLeftColor: 'red', borderLeftWidth: 5, justifyContent: 'center', }}> <Text style={styleSheet.text}> Text With Only Left Border </Text> </View> <View style={{ backgroundColor: '#00B8D4', width: 250, height: 80, borderRightColor: '#FF3D00', borderRightWidth: 5, justifyContent: 'center', marginTop: 25 }}> <Text style={styleSheet.text}> Text With Only Right Border </Text> </View> <View style={styleSheet.topBorder}> <Text style={styleSheet.text}> Text With Only Top Border </Text> </View> <View style={styleSheet.bottomBorder}> <Text style={styleSheet.text}> Text With Only Bottom Border </Text> </View> |
4. Creating Style.
|
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 styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { fontSize: 28, color: 'white', textAlign: 'center', }, topBorder :{ backgroundColor: '#00B8D4', width: 250, height: 80, borderTopColor: 'red', borderTopWidth: 5, justifyContent: 'center', marginTop: 25 }, bottomBorder :{ backgroundColor: '#00B8D4', width: 250, height: 80, borderBottomColor: '#FF3D00', borderBottomWidth: 5, justifyContent: 'center', marginTop: 25 }, }); |
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <View style={{ backgroundColor: '#00B8D4', width: 250, height: 80, borderLeftColor: 'red', borderLeftWidth: 5, justifyContent: 'center', }}> <Text style={styleSheet.text}> Text With Only Left Border </Text> </View> <View style={{ backgroundColor: '#00B8D4', width: 250, height: 80, borderRightColor: '#FF3D00', borderRightWidth: 5, justifyContent: 'center', marginTop: 25 }}> <Text style={styleSheet.text}> Text With Only Right Border </Text> </View> <View style={styleSheet.topBorder}> <Text style={styleSheet.text}> Text With Only Top Border </Text> </View> <View style={styleSheet.bottomBorder}> <Text style={styleSheet.text}> Text With Only Bottom Border </Text> </View> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { fontSize: 28, color: 'white', textAlign: 'center', }, topBorder :{ backgroundColor: '#00B8D4', width: 250, height: 80, borderTopColor: 'red', borderTopWidth: 5, justifyContent: 'center', marginTop: 25 }, bottomBorder :{ backgroundColor: '#00B8D4', width: 250, height: 80, borderBottomColor: '#FF3D00', borderBottomWidth: 5, justifyContent: 'center', marginTop: 25 }, }); |
Screenshot in Android device :-
