KeyboardAvoidingView has no effect on multiline TextInput

KeyboardAvoidingView only works with single-line TextInputs. When the multiline prop is set, KeyboardAvoidingView does not shift the TextInput at all.

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 7.0.0 npm: 3.10.8 Watchman: 4.7.0 Xcode: 9.1

Packages: (wanted => installed) react-native: 0.49.3 react: 16.0.0-beta.5

Target Platform: iOS (10.3)

Steps to Reproduce

1. Use a <TextInput> component with multiline prop set.
2. Wrap this in a ScrollView
3. Wrap that in a KeyboardAvoidingView.

Expected Behavior

Multiline TextInput should scroll above the soft keyboard.

Actual Behavior

Soft keyboard covers multiline TextInput.

Reproducible Demo

import React, { Component } from 'react';
import { Text, TextInput, View, ScrollView, KeyboardAvoidingView, Keyboard} from 'react-native';

...

	render() {
		return (
			<KeyboardAvoidingView style={{flex:1}} behavior="padding" keyboardVerticalOffset={64}>
				<ScrollView keyboardShouldPersistTaps={'handled'}>
					<View style={{padding: 12}}>
						// various content to fill the page
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 1</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 2</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 3</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 4</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 5</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 6</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 7</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 8</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 9</Text>
						<Text style={{fontSize: 20, padding: 40}}>MESSAGE 10</Text>
					</View>
					<TextInput
						style={{padding: 4}}
						multiline={true}
						placeholder={'Type something here...'}
						onChangeText={this.updateMessage}
						value={this.state.message}
					/>
				</ScrollView>
			</KeyboardAvoidingView>
		);
	}

[bob76828]

If you want to KeyboardAvoidingView works fine with multiline TextInput, please setting the scrollEnabled prop of TextInput to false. It works for me.

[jibberilins]

KeyboardAvoidingView works fine with multiline TextInput because i am using them myself. Initially they would not work for me. To solve my problem i removed the height on the TextInput and set the behavior to “padding”. The “flex: 1” you have on the KeyboardAvoidingView might be the problem i think or its the scrollview. But KeyboardAvoidingView definitely works fine with multiline.