react-native-rich-editor icon indicating copy to clipboard operation
react-native-rich-editor copied to clipboard

Unable to scroll the content inside the editor in android

Open BhavyaCodeAlchemy opened this issue 1 year ago • 4 comments

Android : Unable to scroll the content inside the editor

iOS : Working Fine

I use following versions :

"react": "18.2.0", "react-native": "0.73.2", "react-native-pell-rich-editor": "1.8.8",

Description: When using the editor on the Android platform, I'm encountering an issue where I'm unable to scroll the content inside the editor. This makes it difficult to view and edit longer texts or navigate through the content effectively.

Steps to Reproduce:

  • Open the editor on an Android device.
  • Input or paste a lengthy text into the editor.
  • Attempt to scroll through the content inside the editor.

Expected Behavior:

  • I expect to be able to scroll vertically through the content inside the editor smoothly, allowing me to view and edit the entire text without any hindrance.

`<RichEditor scrollEnabled ref={richtext} initialHeight={50} keyboardDisplayRequiresUserAction={false} placeholder={languageService.t(AppConstant.COMMENT)} style={styles.addCommentEditor} editorStyle={styles.editorStyle} onChange={(commentText) => setComment(commentText)} onFocus={() => setFocusOnComment(true)} onBlur={() => setFocusOnComment(false)} />

{isKeyboardVisible && comment.length > 0 && focusOnComment && ( <RichToolbar editor={richtext} style={styles.toolBarStyle} /> )} `

Recordings:

https://github.com/wxik/react-native-rich-editor/assets/117060854/d7f96271-676b-4743-87fd-299db94bff62

https://github.com/wxik/react-native-rich-editor/assets/117060854/42733891-9347-4350-86ee-5445caf55196

BhavyaCodeAlchemy avatar Apr 10 '24 11:04 BhavyaCodeAlchemy

I am also facing same issue!

prakharjcis avatar May 29 '24 07:05 prakharjcis

We are experiencing this same issue as well. Any workaround or fix?

jbrooks58 avatar May 29 '24 15:05 jbrooks58

Try this solution. It's working for me.

          <RichEditor
            scrollEnabled
            ref={richtext}
            initialHeight={50}
            keyboardDisplayRequiresUserAction={false}
            placeholder={languageService.t(AppConstant.COMMENT)}
            style={styles.addCommentEditor}
            editorStyle={{
              ...styles.editorStyle,
              contentCSSText:
                Platform.OS === 'android' && 'max-height:200px;'
            }}
            onChange={(commentText) => {
              commentText === '<div><br></div>' &&
                richtext.current.setContentHTML('');
              setComment(commentText);
            }}
            onFocus={() => setFocusOnComment(true)}
            onBlur={() => setFocusOnComment(false)}
          />

BhavyaCodeAlchemy avatar Jul 10 '24 06:07 BhavyaCodeAlchemy

This solution worked with me

https://github.com/wxik/react-native-rich-editor/issues/381#issuecomment-2559830840

MostafaHamdy3 avatar Dec 24 '24 10:12 MostafaHamdy3