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
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)
For temp solution, I wrap
<Text/>
in<TextInput/>
. Make sure the<TextInput/>
doesn’t specifyvalue
props.Any updates on this? on 0.46.0 running on iOS. still having issues.
+1
@brentvatne
style: { lineHeight }
seems to have no effect on 0.37.0 forTextInput
Fork
react-native
and cherry-pick this commit.It provides
props.style
support for the following keys:lineHeight
,letterSpacing
,textShadowOffset
,textShadowRadius
, andtextShadowColor
.It moves some
RCTShadowText
logic into the newRCTTextAttributes
file. It looks likeRCTTextView
already has anRCTText
internal property, but I could not get it working (via settingprops.children
to aText
component).If anyone’s looking for a working solution, the above commit should help you.
issue still exist…