Multiline TextInputs - numberOfLines property and lineHeight style don't work #20681
Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 29.36 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.8.0 - ~/.nvm/versions/node/v9.8.0/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v9.8.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3
API Levels: 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.2.2
Description
The properties mentioned don't seem to have any affect on TextInputs, not only that but I also get a weird initial height which changes as soon as I enter a key. There are issues with this on both iOS and Android but they are slightly different.
iOS
Android
Reproducible Demo
react-native init reproduce
Replace App.js with:
/**
* @format
* @flow
*/
import React, {Component} from 'react';
import {TextInput} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<TextInput
multiline={true}
numberOfLines={2}
editable={true}
style={{
margin:50,
lineHeight: 100,
borderWidth: 1,
marginBottom: 10
}}
/>
);
}
}
