React Native android TextInput 在切换到表情符号时在键盘下消失

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.

Answer 1

this problem is related with React Native, here's the PR in Github , it is merged but not active in current version of React Native 0.70.6, you can add the fixed code manually and maintain validity until it is added to RN, using patch-package