returnKeyType="done" causes a glitch at the bottom of the screen

[romin-backpack]

returnKeyType="done" causes a glitch at the bottom of the screen on version 1.21.0 of the library. This happens only when there's a ScrollView or a FlatList/LegendList child. Reproducible example and screen recording below:

Example:

import { FlatList, StyleSheet, TextInput, View } from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

const DATA = Array.from({ length: 30 }, (_, i) => i);

export function ConvertScreen() {
  return (
    <KeyboardAvoidingView behavior="padding" style={styles.flex}>
      <FlatList
        data={DATA}
        keyExtractor={(item) => String(item)}
        ListHeaderComponent={<Header />}
        renderItem={()=> (
          <View style={styles.item}>
            <View style={styles.itemInner} />
          </View>
        )}
      />
    </KeyboardAvoidingView>
  );
}

function Header() {
  return (
    <View style={styles.header}>
      <TextInput
        placeholder={"Enter text"}
        keyboardType="decimal-pad"
        style={styles.input}
        placeholderTextColor="#888"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
  header: { padding: 16 },
  input: {
    borderWidth: 1,
    borderColor: "#444",
    borderRadius: 8,
    padding: 12,
    color: "white",
    fontSize: 16,
  },
  item: {
    height: 80,
    marginHorizontal: 16,
    marginVertical: 4,
    backgroundColor: "#1a1a2e",
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  itemInner: {
    width: 40,
    height: 40,
    backgroundColor: "#e94560",
    borderRadius: 4,
  },
});

Screen recording:
https://drive.google.com/file/d/1ZuRXOPpUhFb_kXi3mGSf_h38fo0nj7_j/view?usp=sharing

[kirillzyusko]

Hey @romin-backpack

I think this issue has been raised many times already in repro. For example here: #1286

That "Done" button gets rendered inside InputAccessoryView. When keyboard hides it has two-fold animation. And it's something that Apple controls on their side. I don't think I can fix it somehow, but if you have any suggestions - let me know!

I'll try to see if it's caused by #1161 - if yes I can try to fix it.

By the way - did you try to reproduce it on 1.20.5 version, for example?

[romin-backpack]

Hi @kirillzyusko 1.20.5 works as it should, no glitch. Do you think you can implement a fix on 1.21.1? We wanted to use the latest version as it has some other fixes that we need.

[kirillzyusko]

Yes @romin-backpack I'll try to fix it in upcoming 1.21.x patch-releases (can't guarantee that it will be in 1.21.1, because this release will contain fixes for regressions since 1.20.7 and it will be released this Friday). Since this issue was introduce earlier maybe it will take a little bit more time to fix everything 🤞