React-native: Android keyboard disappears when TextInput is behind the keyboard area

[ericdevries]

When you have a FlatList with regular View's, but upon clicking a View (or touchable) they become TextInput elements, the keyboard won't properly show for items that are below the next keyboard position. Please see attached GIF for an example

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 713.34 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.3.0 - /usr/local/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-24 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1. Copy code below into a standard project
2. Tap on one of the items on the lower part of the screen (no need to scroll)
3. Witness keyboard popping up as expected but then closing immediately

Describe what you expected to happen:
I expect the keyboard to appear and the content to be resized so the bottom of the list is still visible, or at the very least have the focussed input element to be scrolled up above the keyboard

Snack, code example, screenshot, or link to a repository:

import React from "react";
import { FlatList, KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableNativeFeedback, View } from 'react-native';


class TestBrokenStuff extends React.PureComponent {
    public state = {
        searchResults: [],
        editting: null,
    };

    public componentDidMount() {
        const items = [];

        for (let i = 0; i < 100; ++i) {
            items.push('item ' + i);
        }

        this.setState({
            searchResults: items
        });
    }

    public onEdit = (id) => {
        this.setState({
            editting: id,
        });
    };

    public renderTagItem = ({ item }) => {
        return (
            <View style={styles.item}>
                {item === this.state.editting && (
                    <TextInput
                        value={item}
                        autoFocus
                    />
                )}

                {item !== this.state.editting && (
                    <TouchableNativeFeedback onPress={() => this.onEdit(item)}>
                        <Text>{item}</Text>
                    </TouchableNativeFeedback>
                )}
            </View>

        );
    };

    public keyExtractor = (item) => {
        return item;
    };

    public render() {
        const { searchResults } = this.state;

        return (
            <View>
                <KeyboardAvoidingView>
                    <FlatList
                        data={searchResults}
                        renderItem={this.renderTagItem}
                        keyExtractor={this.keyExtractor}
                        keyboardShouldPersistTaps="handled"
                        extraData={this.state.editting}
                    />
                </KeyboardAvoidingView>
            </View>

        );
    }

}

export default TestBrokenStuff;

const styles = StyleSheet.create({
    item: {
        height: 32
    },
});

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[ericdevries]

I have added the missing information

[slalom-mike]

I ran into this bug and what seems to be happening is related to the keyboardDismissMode functionality. When the keyboard first appears, the input goes out of the view, and when keyboardDismissMode is set to 'on-drag' that triggers the closing of the keyboard. To avoid this, the dismiss mode currently needs to be 'none'. For 'on-drag' to be usable, the order of operations there needs to change so that it's not checking whether the input is out of view before it's had a chance to reposition everything.
What makes this even more difficult is that FlatList doesn't seem to be passing the keyboardDismissMode prop to its underlying ScrollView - I've had to create a FlatList alternative that does honor this prop to even use this workaround.

[falxcerebri]

Yeah, my team also faced this issue. Kinda annoying. We've placed a workaround by wrapping <TouchableOpacity> in <ScrollView keyboardDismissMode='none' scrollEnabled={false}>, but that's dirty.

[no-response[bot]]

It's been three weeks since we asked for additional information from the author of this issue. As it happens, we don't have enough information to take action. We are going to close this issue, but please do not hesitate to open a new issue if you are still encountering this problem.

[falxcerebri]

Oh don't worry, if author cannot provide details my team will. I'll just ask a guy who crashed against this.

Edit: Yeah, I'm actively watching this issue.

[ericdevries]

I gave a complete and simple bit of code that demonstrates the issue, what else do you need?

[kesha-antonov]

Same issue!

[kesha-antonov]

@falxcerebri

Your hack worked! Thanks!

I wrapped FlatList in <ScrollView keyboardDismissMode='none'>

[fabriziobertoglio1987]

I can not run your example.

[2333Ge]

Flast add removeClippedSubviews={false}

[safaiyeh]

We have a few solutions here:

Yeah, my team also faced this issue. Kinda annoying. We've placed a workaround by wrapping <TouchableOpacity> in <ScrollView keyboardDismissMode='none' scrollEnabled={false}>, but that's dirty.
@falxcerebri

Flast add removeClippedSubviews={false}
@2333Ge

Have these solved the issue you were having @ericdevries