rn-autoheight-input

React Native TextInput with auto height and multiline support

Installation

Install using npm or yarn:

npm i rn-autoheight-input --save

yarn add rn-autoheight-input

Usage

You can use this input wrapper together with KeyboardAwareScrollView, which can be installed from npm or yarn

Import rn-autoheight-input inside your component:

import InputView from 'rn-autoheight-input'

<KeyboardAwareScrollView 
  ref={(ref) => this.scroll = ref} 
  contentContainerStyle={styles.container}
>
  ...
  <InputView
    blurOnSubmit={false}  
    value={text} 
    onValueChange={(text) => this.setState({text})} 
    placeholder="Add Response"
    onContentSizeChange={
      (event) => { 
        this._scrollToInput(ReactNative.findNodeHandle(event.target));
      }
    } 
  /> 
</KeyboardAwareScrollView>

onContentSizeChange is a callback function which is called when content size of input changes. This can be used to scroll to this input when cursur position changes.

Programatically scroll to any focused TextInput, using the built-in method scrollToFocusedInput of KeyboardAwareScrollView.

_scrollToInput = (reactNode: any) => {
  let extraHeight = 30;
  this.scroll.scrollToFocusedInput(reactNode, extraHeight);
}

API

Props

All the TextInput props will be passed.

| Prop | Type | Description | |----------|----------|-----------------| | blurOnSubmit | boolean | Set false to enable Multiline Support. Default value is true | | value | string | Default value of input. | | defaultHeight | number | Initial height of input. Default is 40 | | viewStyle | Style Object | Style of Input View Wrapper. | | inputStyle | Style Object | Style of Input. | | onContentSizeChange | function | callback function with event argument which is called when content size of input changes. | | onChangeText | function | callback function with text argument which is called when value of input changes. |

License

MIT.

Author

Dariy D.