Scroll to caret position on focused field

[pinarol]

Fixes #436 #432

This PR solves some scrolling issues when keyboard opens. With this PR we are starting to make use of caret position to arrange the scroll position.

Description of the new mechanism can be found in the child PR.

Preview

Implementation Details
The position of the currently focused input in the window had been measured with a native call UIManager.measureInWindow previously. I've added a similar call UIManager.measureSelectionInWindow but this time it also fetched the caret position.
Scrolling to caret is only available for paragraph and heading blocks currently because it requires a TextView, currently Aztec's text input supports this. React native's text input doesn't provide us the caret position and hides the inner TextView from us. React native text inputs will continue to scroll to the bottom of the component. In the future we can replace those with Aztec's inputs to achieve same thing.

Testing Instructions

Testing Prerequisites

• Run yarn install and yarn start

To test with iOS example app

• Run yarn ios

To test with WPiOS

• Follow instructions at WPiOS PR
  iOS - Scrolling behavior scrolls to bottom when inserting new block #436 needs to be tested with WPiOS

Test 1 - Test with long text
This tests #432

• Add a paragraph block and add a text that is longer than the viewable area when keyboard is open
• Close keyboard if open
• Align top of the paragraph block to top of the screen
• Tap at the first line
• Verify that no scrolling occurs because caret is already in the viewable area
• Change orientation and verify caret is still visible

Test 2 - Test with the last line

• Use a paragraph block with some multiple line of input
• Close keyboard if open
• Align the block to the bottom of the screen
• Tap to the last line
• Verify that scroll position is adjusted and inner toolbar is also visible
• Change orientation and verify caret is still visible

Test 3 - Test with a line other than the last line

• Use a paragraph block with some multiple line of input
• Close keyboard if open
• Align the block to the bottom of the screen
• Tap to some line other than the last line
• Verify that scroll position is adjusted to make caret visible only
• Change orientation and verify caret is still visible

Test devices should include:

• iPhone X variety device
• iPad
• Either one of iPhone 6-7-8

Test 4 - Android

• Android side wasn't affected so a simple test would be enough
  Open Android example app and verify it opens successfully

[iamthomasbishop]

This looks so great in the preview – nice work! 👏

[etoledom]

I agree with @iamthomasbishop - It doesn't only look nice but it is also pleasant to use and the scrolling responds exactly as one would expect. Great job @pinarol !

I also like that we are moving some complexity out of Gutenberg itself.

While testing I found a couple of small details, but since this feature is already big enough, I would recommend to make them a separate ticket for later, unless they are simple to fix.

• There is a small scrolling glitch when splitting a long paragraph content on enter. It looks like it scrolls to the top of the block first and then down to the new block.

• When typing at the bottom of the screen, there is no autoscroll to follow the cursor when the content goes behind the toolbar (This might not even be related to the current scrolling behavior work at all).

[pinarol]

Great catches! @etoledom I've opened issues for those #463 #464

464 will require a whole separate solution, currently we only have a mechanism to adjust the scroll on keyboard open/close. We will need a new solution for that. I am guessing we'll need to scroll manually when content height of the text input increases.

I'll look into 463 separately, I am guessing it is a natural result of closing and opening keyboard between two blocks(it happens so fast so it is not noticeable). When keyboard closes the scroll position tries to go back to normal. Maybe I can have a solution for it, it'd be nice to get rid of that glitch.
edit: my theory about 463 is wrong, currently no idea about it :)

[etoledom]

Tested the new changes from wordpress-mobile/react-native-keyboard-aware-scroll-view#2 and everything is working great, discarding the issues described above.

Thank you for an amazing job @pinarol !