Multiline TextInput Does Not Respect Line-Height

Description

Related to #4977

TextInput with multiline={true} and line-height set on the value text should respect the line height value, but does not.

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
  StatusBar,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';

class App extends React.Component {
  render() {
    const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis lacinia sapien, in bibendum est. "
    return (
      <View style={styles.container}>
        <Text style={styles.lorem}>
          {loremText}
        </Text>
    <TextInput style={[styles.lorem,styles.input]} multiline={true} value={loremText} />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#d3c012',
  },
  lorem: {
    textAlign: 'left',
    color: '#000',
    fontSize: 19,
    marginBottom: 5,
    lineHeight: 50,
  },
  input: {
   marginTop: 50,
   padding: 5,
   height: 150, 
   width: 300,
   borderColor: 'purple', 
   borderWidth: 2,
  }
});

This issue can be seen here: https://rnplay.org/apps/TYBoBw

Additional Information

• React Native version: 0.36
• Platform: both iOS, Android
• Operating System: MacOS

[SeanChenU]

For temp solution, I wrap <Text/> in <TextInput/>. Make sure the <TextInput/> doesn’t specify value props.

<TextInput
  onChangeText={(text) => {this.setState({content: text});}} 
  style={{lineHeight: 28}}>
  <Text>{this.state.text}</Text>
</TextInput>

[dmr07]

Any updates on this? on 0.46.0 running on iOS. still having issues.