mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
49a1460a37
Summary: Retrying D30015799 (https://github.com/facebook/react-native/commit/6e903b07fa8e8d9b78cae0e031bb8022f7a63195) with a fix where ScrollViewNativeComponent was missing the automaticallyAdjustKeyboardInsets prop. ----- Original Summary Currently, ScrollViews provide the prop `keyboardDismissMode` which lets you choose `"interactive"`. However when the keyboard is shown, it will be rendered above the ScrollView, potentially blocking content. With the `automaticallyAdjustKeyboardInsets` prop the ScrollView will automatically adjust it's `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) props to push the content up so nothing gets blocked. * The animation curve and duration of the Keyboard is exactly matched. * The absolute position of the ScrollView is respected, so if the Keyboard only overlaps 10 pixels of the ScrollView, it will only get inset by 10 pixels. * By respecting the absolute position on screen, this automatically makes it fully compatible with phones with notches (custom safe areas) * By using the keyboard frame, this also works for different sized keyboards and even `<InputAccessoryView>`s * This also supports `maintainVisibleContentPosition` and `autoscrollToTopThreshold`. * I also fixed an issue with the `maintainVisibleContentPosition` (`autoscrollToTopThreshold`) prop(s), so they behave more reliably when `contentInset`s are applied. (This makes automatically scrolling to new items fully compatible with `automaticallyAdjustKeyboardInsets`) ## Changelog * [iOS] [Added] - ScrollView: `automaticallyAdjustKeyboardInsets` prop: Automatically animate `contentInset`, `scrollIndicatorInsets` and `contentOffset` (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas) * [iOS] [Fixed] - ScrollView: Respect `contentInset` when animating new items with `autoscrollToTopThreshold`, make `automaticallyAdjustKeyboardInsets` work with `autoscrollToTopThreshold` (includes vertical, vertical-inverted, horizontal and horizontal-inverted ScrollViews) Pull Request resolved: https://github.com/facebook/react-native/pull/31402 Test Plan: <table> <tr> <th>Before</th> <th>After</th> </tr> <tr> <td> https://user-images.githubusercontent.com/15199031/115708680-9700aa80-a370-11eb-8016-e75d81a92cd7.MP4 </td> <td> https://user-images.githubusercontent.com/15199031/115708699-9b2cc800-a370-11eb-976f-c4010cd96d55.MP4 </td> </table> ### "Why not just use `<KeyboardAvoidingView>`?" <table> <tr> <th>Before (with <code><KeyboardAvoidingView></code>)</th> <th>After (with <code>automaticallyAdjustKeyboardInsets</code>)</th> </tr> <tr> <td> https://user-images.githubusercontent.com/15199031/115708749-abdd3e00-a370-11eb-8e09-a27ffaef12b8.MP4 </td> <td> https://user-images.githubusercontent.com/15199031/115708777-b3044c00-a370-11eb-9b7a-e040ccb3ef8c.MP4 </td> </table> > Also notice how the `<KeyboardAvoidingView>` does not match the animation curve of the Keyboard ### Usage ```jsx export const ChatPage = ({ flatListProps, textInputProps }: Props): React.ReactElement => ( <> <FlatList {...flatListProps} keyboardDismissMode="interactive" automaticallyAdjustContentInsets={false} contentInsetAdjustmentBehavior="never" maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 100 }} automaticallyAdjustKeyboardInsets={true} /> <InputAccessoryView backgroundColor={colors.white}> <ChatInput {...textInputProps} /> </InputAccessoryView> </> ); ``` ## Related Issues * Fixes https://github.com/facebook/react-native/issues/31394 * Fixes https://github.com/facebook/react-native/issues/13073 Reviewed By: yungsters Differential Revision: D32578661 Pulled By: sota000 fbshipit-source-id: 45985e2844275fe96304eccfd1901907dc4f9279
71 lines
2.8 KiB
Objective-C
71 lines
2.8 KiB
Objective-C
/*
|
|
* Copyright (c) Facebook, Inc. and its 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/UIScrollView.h>
|
|
|
|
#import <React/RCTAutoInsetsProtocol.h>
|
|
#import <React/RCTDefines.h>
|
|
#import <React/RCTEventDispatcherProtocol.h>
|
|
#import <React/RCTScrollableProtocol.h>
|
|
#import <React/RCTView.h>
|
|
|
|
@protocol UIScrollViewDelegate;
|
|
|
|
@interface RCTScrollView : RCTView <UIScrollViewDelegate, RCTScrollableProtocol, RCTAutoInsetsProtocol>
|
|
|
|
- (instancetype)initWithEventDispatcher:(id<RCTEventDispatcherProtocol>)eventDispatcher NS_DESIGNATED_INITIALIZER;
|
|
|
|
/**
|
|
* The `RCTScrollView` may have at most one single subview. This will ensure
|
|
* that the scroll view's `contentSize` will be efficiently set to the size of
|
|
* the single subview's frame. That frame size will be determined somewhat
|
|
* efficiently since it will have already been computed by the off-main-thread
|
|
* layout system.
|
|
*/
|
|
@property (nonatomic, readonly) UIView *contentView;
|
|
|
|
/**
|
|
* The underlying scrollView (TODO: can we remove this?)
|
|
*/
|
|
@property (nonatomic, readonly) UIScrollView *scrollView;
|
|
|
|
@property (nonatomic, assign) UIEdgeInsets contentInset;
|
|
@property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
|
|
@property (nonatomic, assign) BOOL automaticallyAdjustKeyboardInsets;
|
|
@property (nonatomic, assign) BOOL DEPRECATED_sendUpdatedChildFrames;
|
|
@property (nonatomic, assign) NSTimeInterval scrollEventThrottle;
|
|
@property (nonatomic, assign) BOOL centerContent;
|
|
@property (nonatomic, copy) NSDictionary *maintainVisibleContentPosition;
|
|
@property (nonatomic, assign) BOOL scrollToOverflowEnabled;
|
|
@property (nonatomic, assign) int snapToInterval;
|
|
@property (nonatomic, assign) BOOL disableIntervalMomentum;
|
|
@property (nonatomic, copy) NSArray<NSNumber *> *snapToOffsets;
|
|
@property (nonatomic, assign) BOOL snapToStart;
|
|
@property (nonatomic, assign) BOOL snapToEnd;
|
|
@property (nonatomic, copy) NSString *snapToAlignment;
|
|
@property (nonatomic, assign) BOOL inverted;
|
|
|
|
// 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
|
|
// need to be coalesced before sending, for performance reasons.
|
|
@property (nonatomic, copy) RCTDirectEventBlock onScrollBeginDrag;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onScroll;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onScrollToTop;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onScrollEndDrag;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onMomentumScrollBegin;
|
|
@property (nonatomic, copy) RCTDirectEventBlock onMomentumScrollEnd;
|
|
|
|
@end
|
|
|
|
@interface RCTScrollView (Internal)
|
|
|
|
- (void)updateContentSizeIfNeeded;
|
|
|
|
@end
|
|
|
|
RCT_EXTERN void RCTSendFakeScrollEvent(id<RCTEventDispatcherProtocol> eventDispatcher, NSNumber *reactTag);
|