Warning

This repository is archived and no longer maintained.

The functionality provided by AutoGrowingTextInput is now supported natively by the TextField component in react-native-ui-lib.

Migration

Replace AutoGrowingTextInput with TextField from react-native-ui-lib. The general use case is a multiline input with a maximum height:

import {TextField} from 'react-native-ui-lib';

<TextField
  multiline
  style={{maxHeight: 120}}
  placeholder="Your Message"
/>

This covers the auto-growing behaviour out of the box - the field expands as the user types and stops growing once it reaches maxHeight, at which point it becomes scrollable.

react-native-autogrow-textinput

A helper component meant to be used as a drop-in replacement for RN TextInput to allow automatic expanding of a multi-line text input according to the number of lines.

Installation

Install using npm:

npm i react-native-autogrow-textinput --save

Native side installation

To fix the issue with the height not being set for initial values (or with other cases where the input is not set by the user typing using the keyboard) you need to add the libAutoGrowTextInput to your project. After performing npm install, locate AutoGrowTextInput.xcodeproj in YOUR_PROJECT/node_modules/react-native-autogrow-textinput/ios and drag it to your own project, then in your target's general settings, add it to the "Linked Frameworks and Libraries".

How To Use

Import the new component:

import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';

Now use it as you would normally do with a ScrollView to wrap arround TextInput components:

<AutoGrowingTextInput style={styles.textInput} placeholder={'Your Message'} />

Example Project

Check out the full example project here.

In the example folder, perform npm install and then run it from the Xcode project.