TextInput value disappear after 30+ lines if nested under ScrollView in Android 8.0 (28)

[noumantahir]

Description

I have a TextInput inside a ScrollView, on Android Oreo 8.0 (26), after adding in 30+ lines of text as TextInput value, the text disappears along with input cursor as well, the text input does maintain state will disappeared.

React Native version:

SDKs: Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0 System Images: android-26 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom

npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Start typing inside a multiline TextInput nested in ScrollView
2. Text will disappear after about 30 lines, check the video for reference

Code example, demo video, link to a repository:

Even a simple good as simple as this one yields same result on Android Oreo 8.0, this is just for testing purposes.

    <ScrollView style={{flex:1}}>
      <TextInput multiline={true} />
    </ScrollView>

Demo Video from actual app. https://user-images.githubusercontent.com/6298342/119449571-3fc56f80-bd4c-11eb-9bff-b7b11f15a786.mov

Link to repository issue and code https://github.com/ecency/ecency-mobile/issues/1940

https://github.com/ecency/ecency-mobile/blob/4c904061938214a261490b365c924ebacd6c006b/src/components/markdownEditor/view/markdownEditorView.js#L440

[AllanBSantos]

same problem here

[tarouboy]

I have just tested on RN 0.66.1 and the problem still exists.

Tested on Android version: 8.0 device & emulator, 8.1 emulator

I think it's not exactly related to number of lines, but the height of the TextInput. Once it is larger than the window height, it will disappear.

In below example, running on RN 0.66.1, fontSize: 48. It disappears after row 14.

How to reproduce:

1. Create a new project
2. Replace App.js render function with below code: <SafeAreaView style={{ flex:1 }}> <ScrollView contentInsetAdjustmentBehavior="automatic" style={{ flex:1 }}> <TextInput multiline={true} style={{ flex:1, textAlignVertical: 'top', borderColor: 'red', borderWidth: 1 }} disableFullscreenUI /> </ScrollView> </SafeAreaView>

[ewfian]

same issue here. it happens on specific device.

[lukebrandonfarrell]

Linking #28701 and noting that setting the TextInput maxHeight property on styles to the window height will fix this issue:

<TextInput
    style={{
       maxHeight: Dimensions.get('window').height
    }}
/>

[noumantahir]

@lukebrandonfarrell thanks for the tip, it fixed the issue like it was never there, though I had to make changes to the core editor as well, but since it's only for android oreo, we should be good...