React Native Pell Rich Editor & QuickType (predictive text)

194 Views Asked by At

Does the React Native Pell Rich Editor support the QuickType (predictive text) bar on iOS? I am using the above library in the component below. Works great, except the QuickType bar is missing from the keyboard.

Because the rich editor is using a WebView component, as opposed to any TextInput, is this just a cost of using the Pell Rich Editor library, or is there a prop I haven't found in my reading that will enable the quick type bar? Are there any other React Native rich text editors which do support the QuickType input?

    <SafeAreaView>
      <ScrollView style={styles.outerContainer}>
        <RichEditor
          maxLength={maxLength}
          disabled={false}
          editorStyle={styles.richEditor}
          ref={richTextRef}
          placeholder={isNote ? "Add your note..." : "Add an explanation here…"}
          onChange={handleEditorChange}
          initialContentHTML={text}
          multiline
          scrollEnabled
          sentry-label={sentryLabel}
        />
      </ScrollView>

      <RichToolbar
        editor={richTextRef}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.setUnderline,
          actions.setStrikethrough,
          actions.insertBulletsList,
          actions.insertOrderedList,
          actions.checkboxList,
          actions.indent,
          actions.undo,
        ]}
        style={styles.toolbar}
      />

      <HelperText
        type={showErrorInsteadOfInfo ? "error" : "info"}
        testID={`${testID}-remaining-characters`}
      >
        {text ? maxLength - text?.length : maxLength} characters remaining
      </HelperText>
    </SafeAreaView>

Image of editor without QuickType

Other text inputs include the QuickType bar on the iOS keyboard. The Pell Rich Editor does not. Experimenting with props and wrapping in different components has not change this, so I suspect it is built in. Can anyone confirm or correct this? And if confirmed, are there other rich text options? Pell seemed to be the best available currently.

1

There are 1 best solutions below

0
Ian Finley On

This was resolved by including the following props: autoCorrect, autoCompleteType, spellCheck. The final component looks like this:

          <RichEditor
        maxLength={maxLength}
        disabled={false}
        editorStyle={styles.richEditor}
        ref={richTextRef}
        placeholder={placeholder}
        onChange={handleEditorChange}
        initialContentHTML={text}
        multiline
        scrollEnabled
        sentry-label={sentryLabel}
        autoCorrect
        autoCompleteType
        spellCheck
      />