React Native android TextInput disappears under keyboard when changing to emoticons

Question

We wrapped our TextInput inside the KeyboardAvoidingView and all works fine until one changes the keyboard to choose an emoticon. The size of the keyboard changes then and covers the TextInput.

It is possible then to write an emoticon but the user can't see anymore what is going on with his/her text.

Here's our code:

const headerHeight = useHeaderHeight();

...

<KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={headerHeight}
      style={styles.screen}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        <View style={styles.radContainer}>
          <TextInput
              style={styles.addCommentInput}
              value={comment}
              onChangeText={changeCommentHandler}
              onSubmitEditing={() => {
                sendCommentHandler();
              }}
           />
        </View>
      </ScrollView>
</KeyboardAvoidingView>

...

const styles = StyleSheet.create({
  screen: {
    alignContent: "space-between",
    backgroundColor: styleConstants.colors.silver03,
    flex: 1,
    marginBottom: 10,
  },
  radContainer: {
    padding: 10,
  },
  addCommentInput: {
    backgroundColor: "#fff",
    borderColor: styleConstants.colors.silver01,
    borderRadius: 8,
    borderWidth: 1,
    fontFamily: "work-sans_regular",
    fontSize: 14,
    height: 40,
    paddingBottom: 8,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 8,
    textAlignVertical: "center",
  },
});

We're using react native with expo SDK44. The GIF you see is from a test flight binary on a Nokia Android version 10.