Unable to scroll editor content

[avinashyalgonde]

@imnapo I am unable to scroll editor content after adding multiple lines. Is there any way to scroll content?

[imnapo]

yes, It should scroll the content. I've checked the example project and it's working as expected. Please post your code here to be able to help you.

[swapnilgaikwad1507]

In Android, I am able to scroll when keyboard is closed. But as soon as I open keyboard editor stops scrolling.

[avinashyalgonde]

@swapnilgaikwad1507 same for me. Let me know if you find any solution

[EstebanIndiveri]

same problem in "react-native-cn-quill": "^0.7.8" unable scroll input multiline android, only is possible with text selector

[AustinWood]

if quill editor is inside scrollview, quill editor scroll not working for long text. it's not working in android only - in ios, it performs well.

[AustinWood]

quill editor is embedded in webview and it is known bug of react native that webview is not scrollable inside scrollview. if someone encountered this problem, please let me know solution. Thanks!

[AustinWood]

this issue can be fixed by setting nestedScrollEnabled to true in renderWebview function of quill-editor.tsx. and also, set scrollEnabled props to true and simply run 'npx patch-package react-native-cn-quill' to make patch.

nestedScrollEnabled props is newly defined in recent react-native-webview so you would need to upgrade that module first if it's old.

[imnapo]

You may pass any property of react-native-webview to QuilEditor like below:

<QuillEditor
          webview={{
            scrollEnabled: true,
            nestedScrollEnabled: true,
          }}
/>

[HimikoT-T]

You may pass any property of react-native-webview to QuilEditor like below:

<QuillEditor
          webview={{
            scrollEnabled: true,
            nestedScrollEnabled: true,
          }}
/>

It worked, but the toolbar is not showing anymore after scrolling down

[tylerrhinehart]

The proposed solution of setting the webview props fixed the issue on iOS for me but it did not fix android. My component structure looks something like this:

<KeyboardAvoidingScrollView
  scrollEnabled={true}
  nestedScrollEnabled
  keyboardShouldPersistTaps="handled"
>
  <Editor />
</KeyboardAvoidingScrollView>

and the Editor looks like this:

<View style={styles.container}>
  <QuillEditor
    quill={{
      placeholder: placeholder || '',
      modules: {
        toolbar,
      },
    }}
    webview={{
      scrollEnabled: true,
      nestedScrollEnabled: true,
      style: webViewStyles,
    }}
    autoSize
    container={true}
    style={styles.editor}
    ref={_editor}
    customStyles={customStyles}
  />
</View>

If I remove the autoSize prop, it works, but I need the auto sizing. Any ideas?

[JacobDel]

Were you able to fix it @tylerrhinehart ?

[tylerrhinehart]

@JacobDel I was not able to fix it. After working on this for two solid days, I decided it wasn't worth any more time. I ended up keeping it simple and having a fixed height.