Improve scroll view keyboard insets text handling

Author: adamaveray

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m

@@ -10,6 +10,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTConvert.h>
 #import <React/RCTEventDispatcherProtocol.h>
+#import <React/RCTScrollView.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTUtils.h>
 #import <React/UIView+React.h>
@@ -19,6 +20,8 @@
 #import <React/RCTTextAttributes.h>
 #import <React/RCTTextSelection.h>
 
+#define EMPTY_TEXT_KEYBOARD_BOTTOM_OFFSET 15 // Native iOS empty text field bottom keyboard offset amount
+
 @implementation RCTBaseTextInputView {
   __weak RCTBridge *_bridge;
   __weak id<RCTEventDispatcherProtocol> _eventDispatcher;
@@ -27,6 +30,31 @@ @implementation RCTBaseTextInputView {
   BOOL _didMoveToWindow;
 }
 
+- (void)reactUpdateResponderOffsetForScrollView:(RCTScrollView *)scrollView
+{
+  if (![self isDescendantOfView:scrollView]) {
+    // View is outside scroll view
+    return;
+  }
+
+  UITextRange *selectedTextRange = self.backedTextInputView.selectedTextRange;
+  UITextSelectionRect *selection = [self.backedTextInputView selectionRectsForRange:selectedTextRange].firstObject;
+  if (selection == nil) {
+    // No active selection or caret - fallback to entire input frame
+    scrollView.firstResponderFocus = [self convertRect:self.frame toView:nil];
+    return;
+  }
+
+  // Focus on text selection frame
+  CGRect focusRect = CGRectMake(
+    selection.rect.origin.x,
+    selection.rect.origin.y,
+    selection.rect.size.width,
+    selection.rect.size.height + (selectedTextRange.empty ? EMPTY_TEXT_KEYBOARD_BOTTOM_OFFSET : 0)
+  );
+  scrollView.firstResponderFocus = [self convertRect:focusRect toView:nil];
+}
+
 - (instancetype)initWithBridge:(RCTBridge *)bridge
 {
   RCTAssertParam(bridge);

packages/react-native/React/Views/ScrollView/RCTScrollView.h

@@ -48,6 +48,7 @@
 @property (nonatomic, assign) BOOL snapToEnd;
 @property (nonatomic, copy) NSString *snapToAlignment;
 @property (nonatomic, assign) BOOL inverted;
+@property (nonatomic, assign) CGRect firstResponderFocus;
 
 // NOTE: currently these event props are only declared so we can export the
 // event names to JS - we don't call the blocks directly because scroll events

packages/react-native/React/Views/ScrollView/RCTScrollView.m

@@ -20,7 +20,6 @@
 #import "RCTViewUtils.h"
 #import "UIView+Private.h"
 #import "UIView+React.h"
-#import "UIResponder+FirstResponder.h"
 
 /**
  * Include a custom scroll view subclass because we want to limit certain
@@ -326,20 +325,17 @@ - (void)_keyboardWillChangeFrame:(NSNotification *)notification
   }
 
   CGPoint newContentOffset = _scrollView.contentOffset;
-  UIResponder *firstResponder = [UIResponder currentFirstResponder];
-  if ([firstResponder isKindOfClass: [UITextField class]] && [(UITextField *) firstResponder isDescendantOfView:_scrollView]) {
-    UITextField *textField = [UIResponder currentFirstResponder];
-    CGRect textFieldFrame = [textField.superview convertRect:textField.frame toView:nil];
-    CGFloat textFieldBottom = textFieldFrame.origin.y + textFieldFrame.size.height;
-    CGFloat contentDiff = textFieldBottom - endFrame.origin.y;
-    if (textFieldBottom > endFrame.origin.y && endFrame.origin.y < beginFrame.origin.y) {
-      if (self.inverted) {
-        newContentOffset.y -= contentDiff;
-      } else {
-        newContentOffset.y += contentDiff;
-      }
+  self.firstResponderFocus = CGRectNull;
+
+  if ([[UIApplication sharedApplication] sendAction:@selector(reactUpdateResponderOffsetForScrollView:) to:nil from:self forEvent:nil]) {
+    // Inner text field focused
+    CGFloat focusEnd = self.firstResponderFocus.origin.y + self.firstResponderFocus.size.height;
+    if (focusEnd > endFrame.origin.y) {
+      // Text field active region is below visible area with keyboard - update offset to bring into view
+      newContentOffset.y += focusEnd - endFrame.origin.y;
     }
-  } else {
+  } else if (endFrame.origin.y <= beginFrame.origin.y) {
+    // Keyboard opened for other reason
     CGFloat contentDiff = endFrame.origin.y - beginFrame.origin.y;
     if (self.inverted) {
       newContentOffset.y += contentDiff;