Rn-autoheight-input NPM

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.