react-native: 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 2016-10-28_1356

Additional Information

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 16
Comments: 18 (8 by maintainers)

Most upvoted comments

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>

SeanChenU on Aug 8, 2017

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

dmr07 on Jul 12, 2017

cporawat on Dec 23, 2017

@brentvatne style: { lineHeight } seems to have no effect on 0.37.0 for TextInput

aleclarson on Dec 13, 2016

Fork react-native and cherry-pick this commit.

It provides props.style support for the following keys: lineHeight, letterSpacing, textShadowOffset, textShadowRadius, and textShadowColor.

It moves some RCTShadowText logic into the new RCTTextAttributes file. It looks like RCTTextView already has an RCTText internal property, but I could not get it working (via setting props.children to a Text component).

If anyone’s looking for a working solution, the above commit should help you.

aleclarson on Dec 18, 2016

issue still exist…

statelo on Nov 29, 2017