How to display rounded corner border around EditText Text Input component in React Native application using borderRadius style attribute example tutorial.
Contents in this project Add Rounded Corner Borders to Text Input :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add AppRegistry, StyleSheet, TextInput and View component in import block.
|
1
|
import { AppRegistry, StyleSheet, TextInput, View } from ‘react-native’;
|
3. Add View as parent view in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View>
</View>
);
}
|
4. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
|
5. Call the MainContainer class in View.
|
1
2
3
4
5
|
<View style={styles.MainContainer}>
</View>
|
6. Create another class named as TextInputStyleClass . Using the TextInputStyleClass we have been setting up Typed text align with hint align center using textAlign , setting up height of Text Input using height, setting up border width using borderWidth, setting up border color using borderColor in hex color code, setting up border radius using borderRadius, borderRadius value is set as pixels. According to given value the corner edges of border can be 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
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass:{
// Setting up Hint Align center.
textAlign: ‘center’,
// Setting up TextInput height as 50 pixel.
height: 50,
// Set border width.
borderWidth: 2,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
// Set border Radius.
borderRadius: 20 ,
//Set background color of Text Input.
backgroundColor : “#FFFFFF”
}
});
|
7. Add TextInput component in View . Now set hint in Text Input using placeholder, hide the default bottom border of Text Input using underlineColorAndroid=’transparent’ and call the created style class using style={styles.TextInputStyleClass}.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Text in TextInput”
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
// Calling the custom TextInputStyleClass.
style={styles.TextInputStyleClass}/>
</View>
|
8. Complete source code of index.android.js / index.ios.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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View } from ‘react-native’;
class Myproject extends Component {
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Text in TextInput”
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
// Calling the custom TextInputStyleClass.
style={styles.TextInputStyleClass}/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass:{
// Setting up Hint Align center.
textAlign: ‘center’,
// Setting up TextInput height as 50 pixel.
height: 50,
// Set border width.
borderWidth: 2,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
// Set border Radius.
borderRadius: 20 ,
//Set background color of Text Input.
backgroundColor : “#FFFFFF”
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot :
Also Read :
How to Use State Inside React Native App Full Explained Example Tutorial
Create Multi Line Text Breaking Text Line From Middle in React Native
Embed YouTube Video in React Native Android iOS App Using WebView
React Native Timeline ListView FlatList Android iOS Component Example Tutorial
Set onClickListener onPress on Button in React Native Android iOS
