React Native - Auto scroll down with webview text being input

user_1545694 0
Viewed 646

I'm using react-native-pell-rich-editor which is built upon the WebView component. As soon as I get to the bottom of the visible WebView (after typing about 20 lines) the text that I'm typing into the RichEditor is appearing below the visible area - so the text is being input, but I just can't see it! I have to scroll down every new line to see what I'm typing.

The KeyboardAvoidingView is pushing up my RichEditor (WebView) when the RichEditor is focused.

Is there a way to auto scroll down to where the cursor is when typing? Perhaps there is a better solution?

<ScrollView>

    <KeyboardAvoidingView behavior={'padding'}>

      <RichToolbar
        actions={[ actions.keyboard, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.blockquote, actions.code, actions.alignCenter, actions.alignLeft, actions.alignRight ]}
        editor={that.richText}/>
      
      <RichEditor
        initialContentHTML={messageBody}
        initialFocus={true}
        placeholder={'Compose email'}
        ref={that.richText}/>
        
    </KeyboardAvoidingView>

  </ScrollView>
react-native-ios expo react-native webview
1 Answers

There are two parts to the way I solved this problem. I did not use KeyboardAvoidingView.

  1. I also placed the RichEditor inside of a ScrollView, but called the ScrollView.scrollToEnd() method after the editor is initialized so that the cursor would be above the keyboard. This happens after a short timeout after calling RichEditor.focusContentEditor in editorInitializedCallback. Note: doing it this way means you do not need to use the initialFocus prop.
  2. For moving the position while the user is typing, call ScrollView.scrollTo() in the ScrollView's onContentSizeChanged prop. You can use the dimension values that are passed to this prop's function to calculate how many pixels to scroll based on the previous dimensions and scroll position stored in the component state.
user_81341950
Related