react-native-textarea's Introduction

react-native-textarea

React Native textarea component

Example

Installation

Install package via npm:

$ npm install --save react-native-textarea

Include the library in your code:

import Textarea from 'react-native-textarea';

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

react-native-textarea's People

Contributors

Stargazers

Watchers

react-native-textarea's Issues

Add a reference to the TextInput component

This is more of a suggestion but came up as an error. The focus() function cannot call the ref for <Textarea> because the component <Textarea> does not have ref setup.
Example:
_handleFieldFocus = (field) => { this.refs[field].focus(); }

render() { return( <Textarea ref="textarea" ... ... /> ... ... <TouchableOpacity onPress(this._handleFieldFocus.bind(this, 'textarea') ) }

This would result in an error

Solution:
within Textarea.js pass ref="textarea"

so the function _handleFieldFocus can call
this.refs[field].refs.textarea.focus();