'When i copy paste text from browser to my Rich Text Editor TextInput , the view drops down a bit in Android. It adds a small black bar at top

When I paste text:

When I paste text

Top shows a small bar of black color:

Top shows a small bar of black color

Here is my code for the above Video. I have used react-native-pell-rich-editor and it contains a scrollview where Rich Editor is used with TextInput. I've tried all props of ScrollView but issue still persists. When I copy paste text from the browser to my Rich Text Editor TextInput View drops

<ParentContainer color={assets.colors.APP_BACKGROUND_COLOR}>
  <View style={[palette.containerview.superParent]}>
    <View style={styles.actionContainer}>
      <Pressable
        accessibilityLabel={
          assets.localized_strings["SEND_MESSAGE.SUBMIT"]
        }
        accessibilityRole="button"
        style={styles.sendButton}
        onPress={isApiOnProgress ? null : submit}
      >
        <Text
          maxFontSizeMultiplier={HEADING_FONT_MAX}
          style={styles.sendButtonText}
        >
          {assets.localized_strings["SEND_MESSAGE.SUBMIT"]}
        </Text>
      </Pressable>
      <Pressable
        accessibilityLabel={
          assets.localized_strings["SEND_MESSAGE.CANCEL"]
        }
        accessibilityRole="button"
        style={styles.cancelButton}
        onPress={goBack}
      >
        <Text
          maxFontSizeMultiplier={HEADING_FONT_MAX}
          style={styles.cancelText}
        >
          {assets.localized_strings["SEND_MESSAGE.CANCEL"]}
        </Text>
      </Pressable>
    </View>
    {/* )} */}
    <View
      style={[
        palette.containerview.noMargincardView,
        styles.marginBottom,
        { backgroundColor: assets.colors.WHITE_COLOR },
      ]}
    >
      <Header
        title={assets.localized_strings["SEND_MESSAGE.NEW_MESSAGE"]}
        onClose={goBack}
      />

      <View style={styles.messageContainerScrollView}>
        <ScrollView
          nestedScrollEnabled={true}
          ref={scroll}
          style={{ flex: 1 }}
          // keyboardDismissMode="dismiss"
          keyboardDismissMode="none"
          onContentSizeChange={() =>
            scroll.current.scrollToEnd({ animated: false })
          }
        >
          <View>
            <RichEditor
              disabled={false}
              scrollEnabled={false}
              style={styles.messageContainer}
              returnKeyType={assets.localized_strings["SEND_MESSAGE.DONE"]}
              ref={richText}
              placeholder={
                assets.localized_strings["SEND_MESSAGE.COMMENT"]
              }
              actions={[
                actions.setBold,
                actions.setItalic,
                actions.setUnderline,
              ]}
              // onChange={(text) => setMessage(encodeURI(text.toString().trim()))}
              onChange={setMessage_}
            />
            <TextInput
              ref={setCloseKeyboardHackElement}
              underlineColorAndroid="transparent"
              style={{ height: 0, margin: 0, padding: 0 }}
            />
          </View>
        </ScrollView>
      </View>
      <View style={styles.toolbarContainer}>
        {((status && status !== ARTWORK_STATUS.DENIED && status !== ARTWORK_STATUS.ARCHIVED && status !== ARTWORK_STATUS.REJECTED && status !== ARTWORK_STATUS.FULLY_APPOROVED) || isReSubmit) &&
          <Pressable
            accessibilityLabel={
              assets.localized_strings["SEND_MESSAGE.UPLOAD_FILE"]
            }
            accessibilityRole="button"
            style={{
              justifyContent: "center",
              flexDirection: "row",
              alignItems: "center",
              //padding: 10,
              paddingVertical: DW(20)
            }}
            onPress={
              Platform.OS === "ios" ? chooseFileIOS : chooseFileAndroid
            }
          >
            <Image source={assets.images.disclosure.upload_image} />
            <Text
              maxFontSizeMultiplier={HEADING_FONT_MAX}
              style={styles.uploadButtonText}
            >
              {assets.localized_strings["SEND_MESSAGE.UPLOAD_FILE"]}
            </Text>
          </Pressable>
        }
        <RichToolbar
          style={[styles.richBarDark, { marginTop: 10, right: 10, }]}
          flatContainerStyle={styles.flatStyle}
          editor={richText}
          actions={[
            actions.setBold,
            actions.setItalic,
            actions.setUnderline,
          ]}
          selectedIconTint={"#2095F2"}
          disabledIconTint={"#bfbfbf"}
        />
      </View>

      {/* {loading === LOADING_TYPES.LOADING ? (
        <SpinnerUi
          spinner={true}
          content={assets.localized_strings["COMMON.LOADING"]}
          iscancelable={true}
        ></SpinnerUi>
      ) : (
        <List data={AttachmentList} deleteItem={deleteItem} />
      )} */}
      {((status && status !== ARTWORK_STATUS.DENIED && status !== ARTWORK_STATUS.ARCHIVED && status !== ARTWORK_STATUS.REJECTED && status !== ARTWORK_STATUS.FULLY_APPOROVED) || isReSubmit) && <Text
        maxFontSizeMultiplier={HEADING_FONT_MAX}
        accessible={true}
        accessibilityLabel={
          assets.localized_strings["SEND_MESSAGE.ALLOWED_TYPES"]
        }
        style={{
          fontSize: 12,
          color: assets.colors.LIGHT_TEXT_COLOR,
          fontFamily: assets.fonts.REGULAR,
        }}
      >
        {assets.localized_strings["SEND_MESSAGE.ALLOWED_TYPES"]}
      </Text>}
      <List data={AttachmentList} deleteItem={deleteItem} />
      {loading === LOADING_TYPES.LOADING && (
        <SpinnerUi
          spinner={true}
          content={assets.localized_strings["COMMON.LOADING"]}
          iscancelable={true}
        ></SpinnerUi>
      )}
    </View>

    {Platform.OS === "ios" && (
      <KeyboardAccessoryNavigation
        nextHidden={true}
        previousHidden={true}
        doneDisabled={false}
        onDone={closekeyboardhack}
      />
    )}
  </View>
</ParentContainer>



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source