English | 简体中文

react-native-textarea

React Native textarea component

Example

Installation

1. Install package via npm:

$ npm install --save react-native-textarea

2. Include the library in your code:

import Textarea from 'react-native-textarea';

3. Use the component:

...
<View style={styles.container}>
  <Textarea
    containerStyle={styles.textareaContainer}
    style={styles.textarea}
    onChangeText={this.onChange}
    defaultValue={this.state.text}
    maxLength={120}
    placeholder={'好玩有趣的，大家同乐，伤感忧闷的，大家同哭。。。'}
    placeholderTextColor={'#c7c7c7'}
    underlineColorAndroid={'transparent'}
  />
</View>
...

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textareaContainer: {
    height: 180,
    padding: 5,
    backgroundColor: '#F5FCFF',
  },
  textarea: {
    textAlignVertical: 'top',  // hack android
    height: 170,
    fontSize: 14,
    color: '#333',
  },
});

API

Textarea

Properties	Descrition	Type	Default
maxLength	limits the maximum number of characters that can be entered	number	0
containerStyle	custom style	Object	-

More available Textarea API can be found at react-native TextInput