Feature: Improvements to automaticallyAdjustKeyboardInsets

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -200,6 +200,12 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   contentInset?: ?EdgeInsetsProp,
+  /**
+   * Controls the distance between the soft keyboard and the TextInput
+   * when using `automaticallyAdjustKeyboardInsets`.
+   * @platform ios
+   */
+  bottomKeyboardOffset?: ?number,
   /**
    * When true, the scroll view bounces when it reaches the end of the
    * content if the content is larger then the scroll view along the axis of

packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -23,6 +23,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
   automaticallyAdjustContentInsets?: ?boolean,
   automaticallyAdjustKeyboardInsets?: ?boolean,
   automaticallyAdjustsScrollIndicatorInsets?: ?boolean,
+  bottomKeyboardOffset?: ?number,
   bounces?: ?boolean,
   bouncesZoom?: ?boolean,
   canCancelContentTouches?: ?boolean,

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

@@ -36,6 +36,7 @@
 @property (nonatomic, assign) UIEdgeInsets contentInset;
 @property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
 @property (nonatomic, assign) BOOL automaticallyAdjustKeyboardInsets;
+@property (nonatomic, assign) CGFloat bottomKeyboardOffset;
 @property (nonatomic, assign) BOOL DEPRECATED_sendUpdatedChildFrames;
 @property (nonatomic, assign) NSTimeInterval scrollEventThrottle;
 @property (nonatomic, assign) BOOL centerContent;

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

@@ -20,6 +20,7 @@
 #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
@@ -307,6 +308,7 @@ - (void)_keyboardWillChangeFrame:(NSNotification *)notification
   }
 
   double duration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
+
   UIViewAnimationCurve curve =
       (UIViewAnimationCurve)[notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue];
   CGRect beginFrame = [notification.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
@@ -324,11 +326,26 @@ - (void)_keyboardWillChangeFrame:(NSNotification *)notification
   }
 
   CGPoint newContentOffset = _scrollView.contentOffset;
-  CGFloat contentDiff = endFrame.origin.y - beginFrame.origin.y;
-  if (self.inverted) {
-    newContentOffset.y += contentDiff;
+  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 + _bottomKeyboardOffset;
+    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;
+      }
+    }
   } else {
-    newContentOffset.y -= contentDiff;
+    CGFloat contentDiff = endFrame.origin.y - beginFrame.origin.y;
+    if (self.inverted) {
+      newContentOffset.y += contentDiff;
+    } else {
+      newContentOffset.y -= contentDiff;
+    }
   }
 
   if (@available(iOS 14.0, *)) {

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

@@ -67,6 +67,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(maintainVisibleContentPosition, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustKeyboardInsets, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(bottomKeyboardOffset, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(decelerationRate, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(directionalLockEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(indicatorStyle, UIScrollViewIndicatorStyle)

packages/react-native/React/Views/UIResponder+FirstResponder.h

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+#import <UIKit/UIKit.h>
+
+@interface UIResponder (FirstResponder)
+    +(id)currentFirstResponder;
+@end

packages/react-native/React/Views/UIResponder+FirstResponder.m

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "UIResponder+FirstResponder.h"
+
+static __weak id currentFirstResponder;
+
+@implementation UIResponder (FirstResponder)
+
++(id)currentFirstResponder {
+    currentFirstResponder = nil;
+    [[UIApplication sharedApplication] sendAction:@selector(findFirstResponder:) to:nil from:nil forEvent:nil];
+    return currentFirstResponder;
+}
+
+-(void)findFirstResponder:(id)sender {
+   currentFirstResponder = self;
+}
+
+@end

packages/rn-tester/js/examples/ScrollView/ScrollViewKeyboardInsetsExample.ios.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import * as React from 'react';
+
+import {
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+export function ScrollViewKeyboardInsetsExample() {
+  const [automaticallyAdjustKeyboardInsets, setAutomaticallyAdjustKeyboardInsets] = React.useState(true);
+  const [bottomKeyboardOffset, setBottomKeyboardOffset] = React.useState(0);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.controlRow}>
+        <Text><Text style={styles.code}>automaticallyAdjustKeyboardInsets</Text> is {automaticallyAdjustKeyboardInsets + ''}</Text>
+        <Switch
+          onValueChange={v => setAutomaticallyAdjustKeyboardInsets(v)}
+          value={automaticallyAdjustKeyboardInsets}
+          style={styles.controlSwitch}/>
+      </View>
+      <View style={styles.controlRow}>
+          <Text style={styles.code}>bottomKeyboardOffset</Text>
+          <TextInput
+            placeholder={bottomKeyboardOffset + ''}
+            keyboardType={'numeric'}
+            onChangeText={v => setBottomKeyboardOffset(parseInt(v || '0', 10))}
+            style={styles.controlTextInput}/>
+      </View>
+      <ScrollView
+        contentContainerStyle={[
+          styles.scrollViewContent,
+        ]}
+        automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}
+        bottomKeyboardOffset={bottomKeyboardOffset}
+        keyboardDismissMode={'interactive'}>
+        {[...Array(20).keys()].map(item => (
+          <View key={item} style={styles.textInputRow}>
+            <TextInput placeholder={item.toString()} style={styles.textInput}/>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+  },
+  scrollViewContent: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+  textInputRow: {
+    borderWidth: 1,
+    marginVertical: 8,
+    borderColor: '#999',
+  },
+  textInput: {
+    width: '100%',
+    backgroundColor: '#fff',
+    fontSize: 24,
+    padding: 8,
+  },
+  controlRow: {
+    padding: 10,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    borderTopWidth: 1,
+    borderTopColor: '#ccc',
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  controlSwitch: {
+  },
+  controlTextInput: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    marginVertical: -10,
+    marginRight: -10,
+    fontSize: 20,
+    textAlign: 'right',
+  },
+  code: {
+    fontSize: 12,
+    fontFamily: 'Courier',
+  },
+});
+
+exports.title = 'ScrollViewKeyboardInsets';
+exports.category = 'iOS';
+exports.description =
+  'ScrollView automaticallyAdjustKeyboardInsets adjusts keyboard insets when soft keyboard is activated.';
+exports.examples = [
+  {
+    title: '<ScrollView> automaticallyAdjustKeyboardInsets Example',
+    render: (): React.Node => <ScrollViewKeyboardInsetsExample/>,
+  },
+];

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -89,6 +89,10 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'ScrollViewIndicatorInsetsExample',
     module: require('../examples/ScrollView/ScrollViewIndicatorInsetsExample'),
   },
+  {
+    key: 'ScrollViewKeyboardInsetsExample',
+    module: require('../examples/ScrollView/ScrollViewKeyboardInsetsExample'),
+  },
   {
     key: 'SectionListIndex',
     module: require('../examples/SectionList/SectionListIndex'),