TextArea component is one of the most famous component in HTML because of its flexibility and usability to contain multiple lines. TextArea is mostly used to get multiple line information from user. In react native there is no certain component available like TextArea but using the TextInput component we can easily make TextArea component using its props multiline={true} . This prop would expand our TextInput functionality make gives it the ability to contain multiple lines at a single time with also supports move to next line feature. So in this tutorial we would going to Create Custom TextArea Component in iOS Android React Native App Example Tutorial.
Contents in this project Create Custom TextArea Component in iOS Android React Native App Example Tutorial:
1. Import the Platform, StyleSheet, View and TextInput component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, TextInput } from ‘react-native’;
|
2. Create a Root View in render’s return block. This view is our main container view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Creating TextInput component in View.
underlineColorAndroid : Used to hide the bottom line of TextInput .
placeholder : Used to show some place holder text in TextInput component.
numberOfLines : Used to set the maximum number of lines type inside TextInput.
multiline={true} : Making the TextInput multi line.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
underlineColorAndroid=“transparent”
placeholder={“Type Something in Text Area.”}
placeholderTextColor={“#9E9E9E”}
numberOfLines={10}
multiline={true}
/>
</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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
margin:20
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 50,
borderWidth: 2,
borderColor: ‘#9E9E9E’,
borderRadius: 20 ,
backgroundColor : “#FFFFFF”,
height: 150
}
});
|
6. 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
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, TextInput } from ‘react-native’;
export default class App extends Component{
render() {
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
underlineColorAndroid=“transparent”
placeholder={“Type Something in Text Area.”}
placeholderTextColor={“#9E9E9E”}
numberOfLines={10}
multiline={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
margin:20
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 50,
borderWidth: 2,
borderColor: ‘#9E9E9E’,
borderRadius: 20 ,
backgroundColor : “#FFFFFF”,
height: 150
}
});
|
Screenshots:
Also Read :
React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example
React Native Sort String Array into Alphabetical Order Example
Example of React Native Restart NPM Package Reload Reset App
React Native Calculate Square Cube and Square Root Cube Root
Create Initialize Integer String Boolean Float Variables in React Native
