textInput renders invisible text when inner height is large #9077
Description
We are trying to use a textInput to edit a large blob of text. We are running into an issue where the text becomes invisible (but still editable and selectable) when the length reaches a certain point.
The sample code below is enough to reproduce the problem. If you run this on an iPhone 6, the text will be invisible, but you can still scroll, edit and select text. There are three ways to make the text visible again:
- Shorten the length of the text (by changing 48 to 47 in the sample code)
- Rotate to landscape. (note that rotating back to portrait makes it invisible again)
- Decreasing the font size (by changing 13 to 12 in the sample code)
All three of the above actions will make the scroll height smaller. Based on this, we have determined that the length of the string is not problem, but rather the height of the internal scroll area. If you run this on something other than an iPhone 6, the same problem will occur, but with slightly different parameters since the width of the device may be different, which affects the height.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
var TextInput = require('react-native').TextInput;
class LongNoteProject extends Component {
render() {
var text;
for (var i = 0; i < 48; i++) {
text += "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a viverra nunc, et dictum lacus. Praesent fermentum mattis lectus sit amet porttitor. Sed porttitor dui vel magna lobortis interdum. Nullam accumsan elementum lacus eget molestie. Mauris tristique enim erat, non bibendum magna vestibulum a. Nullam fermentum facilisis magna eu tincidunt. Quisque tristique ornare semper. Phasellus sed efficitur libero. Aliquam tristique erat eu nulla scelerisque, sed eleifend elit ultricies. Nullam risus augue, imperdiet vitae sagittis nec, tristique at mi. Aliquam sed cursus dui. Etiam id orci eu ligula gravida mattis a interdum sapien.";
}
return (
<View style={styles.container}>
<TextInput
style = {styles.textstyle}
multiline = {true}
value = {text}
/>
</View>
);
}
}
const styles = StyleSheet.create({
textstyle: {
flex: 1,
fontSize: 13,
padding: 4
},
container: {
flex: 1
}
});
AppRegistry.registerComponent('LongNoteProject', () => LongNoteProject);
ReactNative 0.30.0
React 15.2.1
Xcode 7.3.1 on macOS 10.11.5
iOS 9.3