[RNMobile] [iOS] Editor jumps when inserting a new block

[twstokes]

Description

When pressing return to insert a new block, the editor jumps to a higher position and then scrolls down.

As pointed out by @fluiddot, this may be connected to the React Native v0.66.2 upgrade that took place in WPiOS 19.0.

Step-by-step reproduction instructions

1. Download WPiOS with a version greater than or equal to 19.0
2. Create a new Post to open the block editor
3. Insert consecutive blocks by pressing "return" on the keyboard
4. Observe that once the block inserted is lower than the original vertical space, the view will jump to the top and then scroll down. (see video)

Expected behaviour

The view does not jump to the top. The view smoothly scrolls downward to the new block from the current block.

Actual behaviour

The view jumps to the top and then scrolls down to the new block.

18.9.0.4	19.0.0.5
18.9.0.4.Not.hopping.MP4	19.0.0.5.Hopping.MP4

WordPress information

• WordPress version: 5.9.2
• Gutenberg version: 11.9
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty-One

Device information

• Device: iPhone 12 Pro
• Operating system: iOS 15.4.1
• WordPress app version: WPiOS 19.0 [and greater]

[fluiddot]

This issue might be related to the changes introduced in this PR to fix wordpress-mobile/gutenberg-mobile#4069.

[twstokes]

I'm unsure if there's any relation, but I see a similar effect when writing a post using mobile Safari.

RPReplay_Final1652332525.MP4

[SiobhyB]

It's interesting it's reproducible on the mobile web, too! I found a couple of issues related to jumping when inserting a block with Safari on iOS, so x-referencing them in case they're relevant/useful:

• Mobile / iOS: Regression with "enter" behavior and jumping viewport #16193
• Safari on iOS: scrolls to the top on Enter #33198

[twstokes]

👋 I wanted to add that there's also now a hopping component to the keyboard. iOS 16 / WPiOS 20.9.

RPReplay_Final1665110410.MP4

[fluiddot]

👋 I wanted to add that there's also now a hopping component to the keyboard. iOS 16 / WPiOS 20.9.

RPReplay_Final1665110410.MP4

Thanks @twstokes for reporting this and checking the issue on iOS 16 🙇 ! It's definitely getting bumpier 😞, although the major issue is the big jump in the block list.

I noticed this issue didn't have a priority label so I went ahead and mark it as a high priority. My rationale is that this is disrupting the writing experience severely and might confuse the user about the position where the content is being added.

@SiobhyB looks like you self-assigned this issue some months ago, was there any progress?

[SiobhyB]

Thanks for following up @twstokes!

@SiobhyB looks like you self-assigned this issue some months ago, was there any progress?

@fluiddot, I wasn't able to find a fix, unfortunately, but investigations found the following:

• The issue is likely related to the third-party KeyboardAwareScrollView component.
• There are several reports of similar “bouncing” in KeyboardAwareScrollView‘s repo, for example here, here, and here. Experimenting with the solutions mentioned in those issues (such as the keyboardOpeningTime={ 0 } prop) didn't yield any success.
• @geriux also took a look and was able to get things working by commenting out the following line in the react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js:

https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view/blob/b04ea0ed1293c214bac1a05607246470e2d1e44a/lib/KeyboardAwareHOC.js#L440

I'll go ahead to unassign myself from this issue as I'm not actively looking at it, though I would like to return to this at some point as time allows and am interested in following along with the progress.