React-native: Multiline TextInput Does Not Respect Line-Height

[geirman]

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

[leeight]

[geirman]

@leeight was that the same code as above, or did you make changes?

[leeight]

Nothing change

[brentvatne]

React Native Playground is using an older version of React Native at the moment, I believe it's on 0.33. Seems like this is resolved in 0.36?

[aleclarson]

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

[atdrago]

Just ran into this issue in 0.39.0. @brentvatne what type of response are you looking for? Is there some way I could help?

[aleclarson]

For iOS, it looks like RCTTextView does not use RCTShadowText, which is what implements some style attributes (including lineHeight and textShadowColor).

@brentvatne Do you know if there are plans to use RCTShadowText within RCTTextView? Or should we use custom solutions involving UITextView?

[aleclarson]

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.

[holyxiaoxin]

@aleclarson why was this broken again? Did they revert this commit? Read that it was fixed in 0.33.

[dmr07]

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

[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>

[archansel]

Running 0.47.1 still having this issue in iOS, android works just fine

@SeanChenU solution doesnt work for me

[Vetalyo]

0.47.1 still same problem

[Inlesco]

@SeanChenU hacks like that are so painful to watch, but nevermind... it seems that RN team doesn't see a problem here.

same thing for a non-multiline input not being able to have a border styled through style props and only specifying multiline as a workaround works...

[statelo]

issue still exist...

[cporawat]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[shergin]

I fixed this recently.