What is an alternative of textarea in react-native?
Yes there is. It's called TextInput, the normal TextInput Component supports multiple lines.
Just assign following properties to your TextInput Component
multiline = {true}
numberOfLines = {4}
At the end you should have this:
<TextInput
multiline={true}
numberOfLines={4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
Source https://facebook.github.io/react-native/docs/textinput
If you want to see your TextInput
component like a textarea, you will need to add this
<TextInput
multiline={true}
numberOfLines={10}
style={{ height:200, textAlignVertical: 'top',}}/>
I build text areas in react-native by wrapping a TextInput
component into a View
the following way:
<View style={styles.textAreaContainer} >
<TextInput
style={styles.textArea}
underlineColorAndroid="transparent"
placeholder="Type something"
placeholderTextColor="grey"
numberOfLines={10}
multiline={true}
/>
</View>
...
const styles = StyleSheet.create({
textAreaContainer: {
borderColor: COLORS.grey20,
borderWidth: 1,
padding: 5
},
textArea: {
height: 150,
justifyContent: "flex-start"
}
})
I am using this component: https://www.npmjs.com/package/react-native-autogrow-textinput
It expands automatically on-text growth. I created my own reusable component with the autogrow-textinput as part of it, which inside the component looks like that:
<AutoGrowingTextInput
minHeight={40}
maxHeight={maxHeight} // this is a flexible value that I set in my
component, where I use this reusable component, same below, unless specified the other
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor='#C7C7CD'
style={inputStyle}
value={value}
/>
If you are using only react-native components your option is TextInput
As "funkysoul" explained:
Just assign following properties to your TextInput Component
multiline = {true}
numberOfLines = {4}
If you want to see this component as the classic textarea
(bigger than an inline text-input), you usually will need to add the height
style-property. See the following example:
<TextInput
multiline={true}
numberOfLines={10}
style={{ height:200, backgroundColor:'red'}}
/>
I added the backgroundColor for a better understanding of the height
role. Please don't use it on your project ;)