Skip to content

xinlc/react-native-textarea

Repository files navigation

English | 简体中文

react-native-textarea

npm package npm downloads build

React Native textarea component

Example

Installation

  1. Install package via npm:
$ npm install --save react-native-textarea
  1. Include the library in your code:
import Textarea from 'react-native-textarea';
  1. 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