mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
feat(iOS): implement automicallyAdjustsKeyboardInsets for new arch (#45819)
Summary: This PR implements the missing `automicallyAdjustsKeyboardInsets` for new architecture. After fixing this I've noticed there is an open issue (https://github.com/facebook/react-native/issues/45647) with somebody assigned (sorry shubhamguptadream11 for taking your task) Here is the app running on new arch: https://github.com/user-attachments/assets/673f0587-6a67-47e3-8050-d6ee33a45724 ## Changelog: [IOS] [FIXED] - implement automicallyAdjustsKeyboardInsets for new arch Pull Request resolved: https://github.com/facebook/react-native/pull/45819 Test Plan: 1. Test out ScrollViewKeyboardInsets example 2. See if it works the same with old and new arch Reviewed By: sammy-SC Differential Revision: D60453404 Pulled By: cipolleschi fbshipit-source-id: bd7ce5bac8facffc527106b50c54112acf687bc3
This commit is contained in:
committed by
Facebook GitHub Bot
parent
3572ef3f1b
commit
21bdce7286
+9
@@ -35,6 +35,9 @@ NS_ASSUME_NONNULL_BEGIN
|
||||
*/
|
||||
@property (nonatomic, strong, readonly) UIScrollView *scrollView;
|
||||
|
||||
/** Focus area of newly-activated text input relative to the window to compare against UIKeyboardFrameBegin/End */
|
||||
@property (nonatomic, assign) CGRect firstResponderFocus;
|
||||
|
||||
/*
|
||||
* Returns the subview of the scroll view that the component uses to mount all subcomponents into. That's useful to
|
||||
* separate component views from auxiliary views to be able to reliably implement pull-to-refresh- and RTL-related
|
||||
@@ -59,4 +62,10 @@ NS_ASSUME_NONNULL_BEGIN
|
||||
|
||||
@end
|
||||
|
||||
@interface UIView (RCTScrollViewComponentView)
|
||||
|
||||
- (void)reactUpdateResponderOffsetForScrollView:(RCTScrollViewComponentView *)scrollView;
|
||||
|
||||
@end
|
||||
|
||||
NS_ASSUME_NONNULL_END
|
||||
|
||||
+110
@@ -98,6 +98,8 @@ RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrollView, NSInt
|
||||
// some other part of the system scrolls scroll view.
|
||||
BOOL _isUserTriggeredScrolling;
|
||||
BOOL _shouldUpdateContentInsetAdjustmentBehavior;
|
||||
BOOL _automaticallyAdjustKeyboardInsets;
|
||||
BOOL _inverted;
|
||||
|
||||
CGPoint _contentOffsetWhenClipped;
|
||||
|
||||
@@ -120,6 +122,7 @@ RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrollView, NSInt
|
||||
- (instancetype)initWithFrame:(CGRect)frame
|
||||
{
|
||||
if (self = [super initWithFrame:frame]) {
|
||||
[self _registerKeyboardListener];
|
||||
_props = ScrollViewShadowNode::defaultSharedProps();
|
||||
_scrollView = [[RCTEnhancedScrollView alloc] initWithFrame:self.bounds];
|
||||
_scrollView.clipsToBounds = _props->getClipsContentToBounds();
|
||||
@@ -128,6 +131,8 @@ RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrollView, NSInt
|
||||
((RCTEnhancedScrollView *)_scrollView).overridingDelegate = self;
|
||||
_isUserTriggeredScrolling = NO;
|
||||
_shouldUpdateContentInsetAdjustmentBehavior = YES;
|
||||
_automaticallyAdjustKeyboardInsets = YES;
|
||||
_inverted = NO;
|
||||
[self addSubview:_scrollView];
|
||||
|
||||
_containerView = [[UIView alloc] initWithFrame:CGRectZero];
|
||||
@@ -149,6 +154,103 @@ RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrollView, NSInt
|
||||
[self.scrollViewDelegateSplitter removeAllDelegates];
|
||||
}
|
||||
|
||||
- (void)_registerKeyboardListener
|
||||
{
|
||||
[[NSNotificationCenter defaultCenter] addObserver:self
|
||||
selector:@selector(_keyboardWillChangeFrame:)
|
||||
name:UIKeyboardWillChangeFrameNotification
|
||||
object:nil];
|
||||
}
|
||||
|
||||
- (void)_unregisterKeyboardListener
|
||||
{
|
||||
[[NSNotificationCenter defaultCenter] removeObserver:self name:UIKeyboardWillChangeFrameNotification object:nil];
|
||||
}
|
||||
|
||||
- (void)_keyboardWillChangeFrame:(NSNotification *)notification
|
||||
{
|
||||
if (!_automaticallyAdjustKeyboardInsets) {
|
||||
return;
|
||||
}
|
||||
BOOL isHorizontal = _scrollView.contentSize.width > self.frame.size.width;
|
||||
if (isHorizontal) {
|
||||
return;
|
||||
}
|
||||
|
||||
double duration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
|
||||
|
||||
UIViewAnimationCurve curve =
|
||||
(UIViewAnimationCurve)[notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue];
|
||||
CGRect beginFrame = [notification.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
|
||||
CGRect endFrame = [notification.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
|
||||
|
||||
CGPoint absoluteViewOrigin = [self convertPoint:self.bounds.origin toView:nil];
|
||||
CGFloat scrollViewLowerY = _inverted ? absoluteViewOrigin.y : absoluteViewOrigin.y + self.bounds.size.height;
|
||||
|
||||
UIEdgeInsets newEdgeInsets = _scrollView.contentInset;
|
||||
CGFloat inset = MAX(scrollViewLowerY - endFrame.origin.y, 0);
|
||||
if (_inverted) {
|
||||
newEdgeInsets.top = MAX(inset, _scrollView.contentInset.top);
|
||||
} else {
|
||||
newEdgeInsets.bottom = MAX(inset, _scrollView.contentInset.bottom);
|
||||
}
|
||||
|
||||
CGPoint newContentOffset = _scrollView.contentOffset;
|
||||
self.firstResponderFocus = CGRectNull;
|
||||
|
||||
CGFloat contentDiff = 0;
|
||||
if ([[UIApplication sharedApplication] sendAction:@selector(reactUpdateResponderOffsetForScrollView:)
|
||||
to:nil
|
||||
from:self
|
||||
forEvent:nil]) {
|
||||
// Inner text field focusedS
|
||||
CGFloat focusEnd = CGRectGetMaxY(self.firstResponderFocus);
|
||||
BOOL didFocusExternalTextField = focusEnd == INFINITY;
|
||||
if (!didFocusExternalTextField && focusEnd > endFrame.origin.y) {
|
||||
// Text field active region is below visible area with keyboard - update diff to bring into view
|
||||
contentDiff = endFrame.origin.y - focusEnd;
|
||||
}
|
||||
} else if (endFrame.origin.y <= beginFrame.origin.y) {
|
||||
// Keyboard opened for other reason
|
||||
contentDiff = endFrame.origin.y - beginFrame.origin.y;
|
||||
}
|
||||
if (_inverted) {
|
||||
newContentOffset.y += contentDiff;
|
||||
} else {
|
||||
newContentOffset.y -= contentDiff;
|
||||
}
|
||||
|
||||
if (@available(iOS 14.0, *)) {
|
||||
// On iOS when Prefer Cross-Fade Transitions is enabled, the keyboard position
|
||||
// & height is reported differently (0 instead of Y position value matching height of frame)
|
||||
// Fixes similar issue we saw with https://github.com/facebook/react-native/pull/34503
|
||||
if (UIAccessibilityPrefersCrossFadeTransitions() && endFrame.size.height == 0) {
|
||||
newContentOffset.y = 0;
|
||||
newEdgeInsets.bottom = 0;
|
||||
}
|
||||
}
|
||||
|
||||
[UIView animateWithDuration:duration
|
||||
delay:0.0
|
||||
options:animationOptionsWithCurve(curve)
|
||||
animations:^{
|
||||
self->_scrollView.contentInset = newEdgeInsets;
|
||||
self->_scrollView.verticalScrollIndicatorInsets = newEdgeInsets;
|
||||
[self scrollToOffset:newContentOffset animated:NO];
|
||||
}
|
||||
completion:nil];
|
||||
}
|
||||
|
||||
static inline UIViewAnimationOptions animationOptionsWithCurve(UIViewAnimationCurve curve)
|
||||
{
|
||||
// UIViewAnimationCurve #7 is used for keyboard and therefore private - so we can't use switch/case here.
|
||||
// source: https://stackoverflow.com/a/7327374/5281431
|
||||
RCTAssert(
|
||||
UIViewAnimationCurveLinear << 16 == UIViewAnimationOptionCurveLinear,
|
||||
@"Unexpected implementation of UIViewAnimationCurve");
|
||||
return curve << 16;
|
||||
}
|
||||
|
||||
- (RCTGenericDelegateSplitter<id<UIScrollViewDelegate>> *)scrollViewDelegateSplitter
|
||||
{
|
||||
return ((RCTEnhancedScrollView *)_scrollView).delegateSplitter;
|
||||
@@ -225,6 +327,14 @@ RCTSendScrollEventForNativeAnimations_DEPRECATED(UIScrollView *scrollView, NSInt
|
||||
MAP_SCROLL_VIEW_PROP(showsHorizontalScrollIndicator);
|
||||
MAP_SCROLL_VIEW_PROP(showsVerticalScrollIndicator);
|
||||
|
||||
if (oldScrollViewProps.isInvertedVirtualizedList != newScrollViewProps.isInvertedVirtualizedList) {
|
||||
_inverted = newScrollViewProps.isInvertedVirtualizedList;
|
||||
}
|
||||
|
||||
if (oldScrollViewProps.automaticallyAdjustKeyboardInsets != newScrollViewProps.automaticallyAdjustKeyboardInsets) {
|
||||
_automaticallyAdjustKeyboardInsets = newScrollViewProps.automaticallyAdjustKeyboardInsets;
|
||||
}
|
||||
|
||||
if (oldScrollViewProps.scrollIndicatorInsets != newScrollViewProps.scrollIndicatorInsets) {
|
||||
_scrollView.scrollIndicatorInsets = RCTUIEdgeInsetsFromEdgeInsets(newScrollViewProps.scrollIndicatorInsets);
|
||||
}
|
||||
|
||||
+28
@@ -12,6 +12,7 @@
|
||||
#import <react/renderer/textlayoutmanager/TextLayoutManager.h>
|
||||
|
||||
#import <React/RCTBackedTextInputViewProtocol.h>
|
||||
#import <React/RCTScrollViewComponentView.h>
|
||||
#import <React/RCTUITextField.h>
|
||||
#import <React/RCTUITextView.h>
|
||||
#import <React/RCTUtils.h>
|
||||
@@ -22,6 +23,9 @@
|
||||
|
||||
#import "RCTFabricComponentsPlugins.h"
|
||||
|
||||
/** Native iOS text field bottom keyboard offset amount */
|
||||
static const CGFloat kSingleLineKeyboardBottomOffset = 15.0;
|
||||
|
||||
using namespace facebook::react;
|
||||
|
||||
@interface RCTTextInputComponentView () <RCTBackedTextInputDelegate, RCTTextInputViewProtocol>
|
||||
@@ -96,6 +100,30 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
|
||||
[self _restoreTextSelection];
|
||||
}
|
||||
|
||||
- (void)reactUpdateResponderOffsetForScrollView:(RCTScrollViewComponentView *)scrollView
|
||||
{
|
||||
if (![self isDescendantOfView:scrollView.scrollView]) {
|
||||
// View is outside scroll view
|
||||
return;
|
||||
}
|
||||
|
||||
UITextRange *selectedTextRange = _backedTextInputView.selectedTextRange;
|
||||
UITextSelectionRect *selection = [_backedTextInputView selectionRectsForRange:selectedTextRange].firstObject;
|
||||
CGRect focusRect;
|
||||
if (selection == nil) {
|
||||
// No active selection or caret - fallback to entire input frame
|
||||
focusRect = self.bounds;
|
||||
} else {
|
||||
// Focus on text selection frame
|
||||
focusRect = selection.rect;
|
||||
BOOL isMultiline = [_backedTextInputView isKindOfClass:[UITextView class]];
|
||||
if (!isMultiline) {
|
||||
focusRect.size.height += kSingleLineKeyboardBottomOffset;
|
||||
}
|
||||
}
|
||||
scrollView.firstResponderFocus = [self convertRect:focusRect toView:nil];
|
||||
}
|
||||
|
||||
#pragma mark - RCTViewComponentView overrides
|
||||
|
||||
- (NSObject *)accessibilityElement
|
||||
|
||||
+9
@@ -91,6 +91,15 @@ ScrollViewProps::ScrollViewProps(
|
||||
"automaticallyAdjustsScrollIndicatorInsets",
|
||||
sourceProps.automaticallyAdjustsScrollIndicatorInsets,
|
||||
true)),
|
||||
automaticallyAdjustKeyboardInsets(
|
||||
CoreFeatures::enablePropIteratorSetter
|
||||
? sourceProps.automaticallyAdjustKeyboardInsets
|
||||
: convertRawProp(
|
||||
context,
|
||||
rawProps,
|
||||
"automaticallyAdjustKeyboardInsets",
|
||||
sourceProps.automaticallyAdjustKeyboardInsets,
|
||||
true)),
|
||||
decelerationRate(
|
||||
CoreFeatures::enablePropIteratorSetter
|
||||
? sourceProps.decelerationRate
|
||||
|
||||
+1
@@ -40,6 +40,7 @@ class ScrollViewProps final : public ViewProps {
|
||||
bool centerContent{};
|
||||
bool automaticallyAdjustContentInsets{};
|
||||
bool automaticallyAdjustsScrollIndicatorInsets{true};
|
||||
bool automaticallyAdjustKeyboardInsets{true};
|
||||
Float decelerationRate{0.998f};
|
||||
Float endDraggingSensitivityMultiplier{1};
|
||||
bool enableSyncOnScroll{false};
|
||||
|
||||
Reference in New Issue
Block a user