React Native supports multiple type of Border style formats and one of them is set border to one side of a Root View or Child View. So in this tutorial we would going to show Add Border to only Bottom side of View in iOS Android react native application example tutorial using borderBottomWidth and borderBottomColor style attributes.
Contents in this project Add Border to only Bottom side of View in Android iOS React Native app example :
1. Import StyleSheet and View component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
|
2. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Create a Child View in Root View now we would call the childView style on it. We are setting up only bottom border to this child view. Using this method you can easily set bottom border around any view component.
|
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.childView}>
{/* Put Your Component Here. */}
</View>
</View>
);
}
|
4. Create Style.
MainContainer : This is the style for Root View.
childView : Style for Child View. The borderBottomWidth and borderBottomColor attribute is doing the main work in this style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
childView: {
width: 100,
height: 100,
borderBottomWidth :5,
borderBottomColor: ‘#000’,
backgroundColor: ‘#00BCD4’,
}
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, View} from ‘react-native’;
export default class Mynewproject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.childView}>
{/* Put Your Component Here. */}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
childView: {
width: 100,
height: 100,
borderBottomWidth :5,
borderBottomColor: ‘#000’,
backgroundColor: ‘#00BCD4’,
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Sort String Array into Alphabetical Order Example
React Native Full Page Width Swipeable Horizontal ScrollView Android iOS
React Native Detect App is in Background or Foreground using AppState
Wish You All a Very Very Happy New Year 2018
React Native MacOS Catalina Watchman Response Error Operation not Permitted
