Editor Auto scroll when typed anything

[bs-dipesh-patel]

                <ScrollView ref={scrollRef} style={{ maxHeight: maxHeight }}>
                    <RichEditor
                        autoCorrect={true}
                        autoCapitalize={'sentences'}
                        initialFocus={false}
                        firstFocusEnd={false}
                        disabled={disabled}
                        editorStyle={styles.contentStyle} // default light style
                        ref={richText}
                        style={styles.richEditor}
                        useContainer={true}
                        initialHeight={minHeight}
                        scrollEnabled={false}
                        placeholder={'Type here...'}
                        editorInitializedCallback={editorInitializedCallback}
                        onHeightChange={(h) => {
                            setInputHeight(h)
                        }}
                        onChange={handleChange}
                        onPaste={handlePaste}
                        onTouchStart={(event: GestureResponderEvent) => {
                            handleTouchStart(event)
                        }}
                        onKeyUp={handleKeyUp}
                        onKeyDown={handleKeyDown}
                        onInput={handleInput}
                        onMessage={handleMessage}
                        onFocus={handleFocus}
                        onBlur={handleBlur}
                        onCursorPosition={handleCursorPosition}
                        pasteAsPlainText={true}
                    />
                </ScrollView>

not sure why this happens

Screen_recording_20250903_182559.mp4

[bs-dipesh-patel]

Dose anyone know how to fix this?

[dipakluhar]

same issue anyone find solution ?

[bs-dipesh-patel]

I think this is happened only After updating Android API to 35:

buildscript { ext { buildToolsVersion = "35.0.0" minSdkVersion = 24 compileSdkVersion = 35 targetSdkVersion = 35 ndkVersion = "26.1.10909125" kotlinVersion = "1.9.24" RNNKotlinVersion = kotlinVersion }

Because iOS works fine, it breaks for Android app

[dipakluhar]

Right

[rajeevCs]

same isssue,does anyone find the solutions

[bs-dipesh-patel]

@stulip I’d appreciate your input here since this seems Android-specific, iOS works fine.

[rajeevCs]

A temporary fix is refactoring your existing component

[bs-dipesh-patel]

Okay but what would be fix for refactoring? @rajeevCs any suggestions?

[Serranosoft]

I couldn’t reproduce the issue you mentioned, could you share more details?

Some factors that might be affecting the scroll behavior are:

• The use of the inputHeight state
• The callbacks that handle cursor position, such as handleCursorPosition
• The type of action being triggered in the onKeyDown / onKeyUp events

It could also be helpful to check the styles applied to the entire component, in case there’s something we’re overlooking

[dipakluhar]

screen-20250905-163803.mp4

Issue occurs when the editor is placed at the end of a ScrollView with a large form input.

<ScrollView>
 {/* Rest of the inputtext content */}
         <RichToolbar
            style={styles.htmlToolBarContainer}
            editor={richText}
            actions={[
              actions.setBold,
              actions.setItalic,
              actions.setUnderline,
              actions.insertLink,
              actions.insertBulletsList,
            ]}
            tintColor={'#7A7A7A'}
            selectedIconTint={color1}
            iconMap={{
              [actions.setBold]: ({tintColor}: any) => (
                <BoldSvg height={14} width={17} color={tintColor} />
              ),
              [actions.setItalic]: ({tintColor}: any) => (
                <ItalicSvg height={15} width={17} color={tintColor} />
              ),
              [actions.setUnderline]: ({tintColor}: any) => (
                <UnderlineSvg height={13} width={14} color={tintColor} />
              ),
              [actions.insertLink]: ({tintColor}: any) => (

                <LinkSvg height={17} width={17} color={tintColor} />
              ),
              [actions.insertBulletsList]: ({tintColor}: any) => (
                <BulletSvg height={20} width={15} color={tintColor} />
              ),
            }}
          />
          <RichEditor
            style={styles.richTextContainer}
            editorStyle={{backgroundColor: colors.colorGray10}}
            initialHeight={(width * 50) / 100}
            placeholder={strings.DescribeYourDetailsHere}
            ref={richText}
            initialContentHTML={description}
            onChange={text => {
              setDescription(text);
            }}
            scrollEnabled={false} // ✅ Fix: Prevent auto-scroll on Android
            pasteAsPlainText={true}
            useContainer={true}
            onCursorPosition={handleCursorPosition}
            // onFocus={() => {
            //   scrollRef?.current?.scrollToEnd({animated: true});
            // }}
          />

          </ScrollView>

Current Behavior

When typing inside the RichEditor, the cursor and text input area do not auto-scroll into view if the content grows beyond the visible area.

Initially, when the editor is empty or only has a small amount of text, typing works fine.

Once enough content is added to require scrolling, the cursor goes behind the keyboard or toolbar, and the editor does not auto-scroll.

Auto-scroll only starts working after I manually scroll the editor all the way down once.

After that first manual scroll, further typing scrolls correctly.

Expected Behavior

The editor should auto-scroll the cursor into view immediately, without requiring any manual scroll.
Typing in a new line at the bottom should always bring the cursor into view, even when the editor is freshly mounted.

[rajeevCs]

have a look at this
https://github.com/software-mansion-labs/react-native-enriched