Solution: Auto-scroll while typing on Android

[Qurat-ul-ainn]

Hi everyone 👋,

I faced the same auto-scroll issue on Android when typing inside react-native-pell-rich-editor. After debugging step by step, I found a fix that makes the editor stable and prevents unexpected scrolling.

Here’s the working component I’m using in production:
import React, { useRef } from 'react';
import {
Platform,
ScrollView,
View,
KeyboardAvoidingView
} from 'react-native';
import { RichEditor, RichToolbar, actions } from 'react-native-pell-rich-editor';

const RichTextEditor = (props) => {
const scrollRef = useRef();
const richTextRef = useRef();

return (
<View style={{
flex: 1,
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 8,
overflow: 'hidden',
minHeight: 200,
}}>
<KeyboardAvoidingView
style={{ flex: 1 }}
keyboardVerticalOffset={Platform.OS === 'ios' ? 70 : 0}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<View style={{
paddingHorizontal: 10,
backgroundColor: '#f5f5f5',
borderBottomWidth: 0.5,
borderColor: '#ddd',
}}>
<RichToolbar
editor={richTextRef}
actions={[
actions.undo,
actions.redo,
actions.setBold,
actions.setItalic,
actions.setUnderline,
actions.setStrikethrough,
actions.insertBulletsList,
actions.insertOrderedList,
actions.blockquote,
actions.alignLeft,
actions.alignCenter,
actions.alignRight,
actions.insertLink,
actions.line,
actions.indent,
actions.outdent,
]}
iconTint="#333"
selectedIconTint="#007bff"
selectedButtonStyle={{ backgroundColor: '#e0e0e0' }}
/>

    <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
      <View style={{ flex: 1, marginTop: 10, marginBottom: 20 }}>
        <RichEditor
          ref={richTextRef}
          initialContentHTML={props.initialContent || ""}
          placeholder={props.placeholder || "Start typing..."}
          useContainer={true}
          scrollEnabled={false}   // ✅ Fix: Prevent auto-scroll on Android
          androidLayerType="hardware"
          editorStyle={{
            color: '#000',
            contentCSSText: `
              font-family: Verdana, sans-serif;
              font-size: 16px;
              padding: 0 10px;
              line-height: 18px;
            `,
          }}
          onChange={props.onChange}
          pasteAsPlainText={true}
          onPaste={() => scrollRef?.current?.scrollToEnd()}
        />
      </View>
    </ScrollView>
  </KeyboardAvoidingView>
</View>

);
};

export default RichTextEditor;