-
Notifications
You must be signed in to change notification settings - Fork 24.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: ScrollView
automaticallyAdjustKeyboardInsets
(#31402)
Summary: Retrying D30015799 (6e903b0) 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: #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 #31394 * Fixes #13073 Reviewed By: yungsters Differential Revision: D32578661 Pulled By: sota000 fbshipit-source-id: 45985e2844275fe96304eccfd1901907dc4f9279
- Loading branch information
1 parent
bba5e6b
commit 49a1460
Showing
7 changed files
with
117 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters