React-native: [FlatList] [Android] Issue with TextInput element in the bottom of a FlatList

[a7urag]

Description:
TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it.
The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.

Reproduction Steps and Sample Code

<FlatList
          data={this.state.items}
          style={{ flex: 1 }}
          renderItem={(i) => (
            <View style={{ flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#333", padding: 24 }}>
              <Text style={{}}>{i.index}</Text>
              <TextInput style={{ flex: 1, backgroundColor: "#bbb" }} />
            </View>
          )}
        />

React Native version:

    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 106.97 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 26, 28
      Build Tools: 25.0.1, 27.0.3, 28.0.3, 29.0.0
      System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.5429.30.34.5452501
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.4 => 0.61.4

[a7urag]

Copy of https://github.com/facebook/react-native/issues/13745

[Silviu-Marian]

set removeClippedSubviews={false}

[oliviermtl]

set removeClippedSubviews={false}

This does not resolve it

[FabianBG]

I faced the same issue, I have a code like this:

<View>
    <FlatList
      onEndReached={handleEndReach}
      data={props.items}
      renderItem={renderRow}
      keyExtractor={getKey}
      onEndReachedThreshold={0.01}
    />
</View>

I can't use the last input from the flat list because it shows and hide immediately the keyboard, as some workarounds I fond some android manifest solutions but none of this worked for me so I changed the View for a ScrollView wrapper of the FlatList and it solved the problem. Maybe it is a problem when it scroll to make visible the input and the keyboard on a View Screen.

Solution:

<ScrollView>
    <FlatList
      onEndReached={handleEndReach}
      data={props.items}
      renderItem={renderRow}
      keyExtractor={getKey}
      onEndReachedThreshold={0.01}
    />
</ScrollView>

[bakerac4]

For what its worth, I have this same issue and https://github.com/facebook/react-native/issues/28246#issuecomment-621537950 did indeed fix it. No idea why..

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.