feat: interactive keyboard dismissal #65517

wgsquayson · 2025-07-04T21:29:14Z

Explanation of Change

This PR aims to add interactive keyboard dismissal (or pull down to close keyboard) capabilities to the composer screen, specifically the ReportActionsList component and MoneyRequestReportActionsList. In order to do so, it adds:

for iOS, a custom useKeyboardHandler and the KeyboardGestureArea component from react-native-keyboard-controller. The iOS implementation animates the list insets using the keyboard height and the scroll position as parameters, as this is the recommended approach from react-native-keyboard-controller.
for android and other platforms, only the KeyboardGestureArea component is used, but the gesture does not work on web.

Fixed Issues

$ #54270
PROPOSAL: Adding the react-native-keyboard-controller recommended setup to achieve the interactive keyboard dismissal.

Tests

For Android and iOS

Sign in to the app
Touch/click any of your reports, preferably one that has enough messages to scroll
You should be able to scroll up or down, and whenever you open the keyboard, the scroll position should be preserved
You should be able to pull the composer down on scroll (from its top, like whatsapp) or touch the chat in order to close the keyboard, and the scroll position should be preserved as well
You can write a long text, open the composer as full screen, close the full screen mode, and the scroll position should still be preserved.
When writing a long text, and the composer grows, you should be able to pull down to perform the same as step 4
When exiting the composer screen, the Keyboard should close automatically
Pagination when reaching the list vertical edges while scrolling should work as before

For other platforms

The pull down to dismiss is not applicable, but all steps except 4 and 6 from the android and ios list can be tested here.

PS: I was not able to test on iOS Safari, but i'm guessing it behaves the same as iOS chrome.

Offline tests

Same as tests

QA Steps

Same as tests

PR Author Checklist

Screenshots/Videos

Android: Native

android.mov

Android: mWeb Chrome

chrome.android.mp4

iOS: Native

ios.mov

iOS: mWeb Chrome

chrome.ios.mov

MacOS: Chrome / Safari

web.desktop.mov

MacOS: Desktop

web.desktop.mov

kirillzyusko · 2025-07-07T15:03:35Z

src/pages/home/ReportScreen.tsx

+        <KeyboardGestureArea
+            style={styles.flexGrow1}
+            offset={90}
+            interpolator="ios"
+            textInputNativeID="composer"
+        >


Just wanted to highlight, that usage of this component will automatically enable interactive dismissal on Android (so we have to test that platform carefully as well).

Also if you discover any kind of bugs/undesired behavior, don't hesitate to remove it and test the implementation on iOS without this component. If KeyboardGestureArea produces any bugs, then let me know and I'll try to fix them!

(posting it here because KeyboardGestureArea relatively new component on iOS and may have some bugs 😅)

Sure, it's working alright on android so far!

kirillzyusko · 2025-07-07T15:04:46Z

src/pages/home/ReportScreen.tsx

+        <KeyboardGestureArea
+            style={styles.flexGrow1}
+            offset={90}
+            interpolator="ios"
+            textInputNativeID="composer"
+        >


I think we shouldn't hardcode it? (correct me if I'm wrong)

When the multiline input grows I think it changes its size so we should reflect those changes here?

(but again, correct me if I'm wrong, maybe the approach with growing input has been re-worked recently and now it doesn't change its height if you type a lot of text)

Yeah, i changed it to grow according to the composer height :)

roryabraham

am I correct in thinking that this is the PR in which we should remove android:windowSoftInputMode="adjustResize" in both NewDot standalone and HybridApp?

wgsquayson · 2025-07-23T23:25:47Z

Hey @roryabraham sorry about the delay - i'm not sure what android:windowSoftInputMode="adjustResize" does, but i can take a look.

roryabraham · 2025-07-24T02:42:01Z

Disclaimer: It's been a long time since we started working on the react-native-keyboard-controller migration, and I'm writing from what I recall here. My recollection may be flawed. You and @kirillzyusko should investigate further.

If I'm not mistaken, android:windowSoftInputMode is the configuration that enables and disables Android's OS-level keyboard avoidance logic for apps. It works pretty well, but it's also complex for our use-case, because iOS does not have the same feature. So we have some confusing platform fragmentation in place:

manually manage keyboard avoidance in the React Native layer on iOS and mobile web
no-op on Android and let the OS handle it

Furthermore, if memory serves, android:windowSoftInputMode="adjustResize" does not work with interactive keyboard dismissal. So if that flag is still set in the AndroidManifest, it muddies the water on how keyboard avoidance works on Android.

kirillzyusko · 2025-07-24T14:43:04Z

@roryabraham we enabled edge-to-edge and kept using adjustResize. Such a combination works very similar to adjustNothing (like iOS works too - all default keyboard handling gets disabled).

So at this point of time all keyboard avoiding is handled by react-native-keyboard-controller (mostly by its KeyboardAvoidingView component), not by OS anymore.

So now we can write cross-platform code that will work identically everywhere, and interactive keyboard dismissal can be implemented on Android too 👀

wgsquayson · 2025-07-24T15:04:53Z

@kirillzyusko legend

github-actions · 2025-07-25T14:49:57Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-07-26T08:26:23Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-07-26T09:11:20Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
Built from App PR #65517.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/65517/index.html	❌ FAILED ❌
	The QR code can't be generated, because the iOS build failed

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/65517/NewExpensify.dmg	https://65517.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

mountiny · 2025-07-28T21:27:41Z

@parasharrajat here for a review, please give it a go and report any bugs you find! thanks!

parasharrajat · 2025-07-29T09:29:07Z

I will test it shortly...

parasharrajat · 2025-08-01T18:46:20Z

Looks like we are still working on some issues and in the process of discussing the implementation.

I will keep a watch on this PR as we progress. Feel free to seek help from me anytime if needed.

chrispader

This looks pretty good already! Left some comments around the new implementation that we discussed yesterday.

src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

src/components/CustomAnimatedFlatList/index.tsx

chrispader · 2025-08-05T09:14:16Z

src/components/InvertedFlatList/index.tsx

        lastScrollEvent.current = timestamp;
    };

+    useAnimatedReaction(


Why do we have to manually trigger onScroll here with an animated reaction? Can't we just pass the callback as a prop down to BaseInvertedFlatList -> KeyboardDismissableFlatList which then calls it it alongside the keyboard dismissal logic in a joint callback?

I don't really like the idea of having a separate manual trigger for the calling the onScroll callback

This can be done, i thought about just leaving this here since it was already here

chrispader · 2025-08-05T09:18:30Z

src/components/KeyboardDismissableFlatList/KeyboardDismissableFlatListContext.tsx

@@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';


Do we really need to have the keyboard dismissal logic in a context? I think this might cause some unnecessary re-renders. Can't we have just move this logic to a hook and then use it in KeyboardDismissableFlatList? This is not used across multiple components, right?

It was a hook and it is actually used across some components. I decided to write a context because I wanted to keep the scroll and insets implementation closer to the KeyboardDismissableFlatList component, and other components need access to the values that are updated by this component.

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

chrispader · 2025-08-05T09:24:10Z

src/pages/home/report/ReportFooter.tsx

+        };
+    });
+
+    const onLayoutInternal = useCallback(


see comment in ReportActionCompose

This one is actually needed to track the composer height on this component

melvin-bot · 2025-08-07T02:51:28Z

@roryabraham Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

parasharrajat · 2025-08-07T17:24:31Z

I will start review now.

mountiny · 2025-09-25T17:29:08Z

Thanks Chris

codecov · 2025-09-25T21:33:00Z

Codecov Report

❌ Patch coverage is 58.41121% with 89 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...equestReportView/MoneyRequestReportActionsList.tsx	7.69%	12 Missing ⚠️
...t/floatingMessageCounterVisibilityHandler/index.ts	0.00%	8 Missing ⚠️
...ScrollManager/handlers/scrollToOffset/index.ios.ts	0.00%	7 Missing ⚠️
...bleFlatList/KeyboardDismissibleFlatListContext.tsx	68.42%	6 Missing ⚠️
src/pages/home/ReportScreen.tsx	76.92%	5 Missing and 1 partial ⚠️
src/styles/utils/index.ts	66.66%	6 Missing ⚠️
.../MoneyRequestReportView/MoneyRequestReportView.tsx	0.00%	5 Missing ⚠️
...portScrollManager/handlers/scrollToBottom/index.ts	0.00%	5 Missing ⚠️
...rc/components/ActionSheetAwareScrollView/index.tsx	0.00%	4 Missing ⚠️
...ScrollManager/handlers/scrollToBottom/index.ios.ts	55.55%	4 Missing ⚠️
... and 14 more

📢 Thoughts on this report? Let us know!

…atList)

…atedKeyboardHandler``

chrispader · 2025-09-27T14:16:16Z

@roryabraham @trjExpensify @parasharrajat i would like to split this PR up into 2 smaller PRs, to prevent this PR from being reverted because of regressions and make review and testing easier:

PR will just add the new components needed for interactive keyboard dismissal: KeyboardDismissableFlatList, CustomAnimatedFlatList copy of Animated.FlatList and other added logic for this feature
PR will actually migrate the ReportActionsView and MoneyRequestReportView to use the new list components.

Does that sound good for you?

parasharrajat · 2025-09-27T14:17:16Z

@chrispader I agree.

… restructure type

chrispader · 2025-09-28T18:57:47Z

@roryabraham @trjExpensify @parasharrajat I've went ahead and split this up into two PRs:

kirillzyusko reviewed Jul 7, 2025

View reviewed changes

kirillzyusko mentioned this pull request Jul 8, 2025

[MEDIUM] react-native-keyboard-controller migration plan #37203

Closed

roryabraham reviewed Jul 12, 2025

View reviewed changes

wgsquayson force-pushed the feat/interactive-keyboard-dismissal branch from 392dc16 to 2c0b3e9 Compare July 24, 2025 20:57

roryabraham mentioned this pull request Jul 24, 2025

Improve the composer swipe down closing logic #54270

Open

This comment has been minimized.

Sign in to view

mountiny requested a review from parasharrajat July 28, 2025 21:26

mountiny assigned wgsquayson Jul 28, 2025

wgsquayson force-pushed the feat/interactive-keyboard-dismissal branch from 04d87d0 to 183f8df Compare August 5, 2025 00:12

chrispader suggested changes Aug 5, 2025

View reviewed changes

wgsquayson force-pushed the feat/interactive-keyboard-dismissal branch from b8e9059 to 3d938f9 Compare August 7, 2025 02:50

wgsquayson marked this pull request as ready for review August 7, 2025 02:51

wgsquayson requested review from a team as code owners August 7, 2025 02:51

melvin-bot bot requested review from roryabraham and removed request for a team August 7, 2025 02:51

wgsquayson force-pushed the feat/interactive-keyboard-dismissal branch from 2dcb0d7 to a64666a Compare August 7, 2025 23:51

This comment was marked as outdated.

Sign in to view

chrispader added 2 commits September 25, 2025 22:11

Merge branch 'main' into feat/interactive-keyboard-dismissal

81cae46

fix: remove outdated forwardRef

59355ed

chrispader added 6 commits September 25, 2025 23:11

fix: properly annotate copy of Reanimated FlatList

c6168f5

fix: add back eslint-disable-next-line for createAnimatedComponent(Fl…

0423655

…atList)

fix: invalid import

0dbbfa2

fix: prevent scroll when dragging down keyboard

a28281a

refactor: move file

85a568b

refactor: rename withAnimatedKeyboardHandler prop to `shouldUseAnim…

6b50c99

…atedKeyboardHandler``

chrispader added 16 commits September 27, 2025 15:20

fix: remove propTypes and add displayName

2c4e753

refactor: move original implementation and mock to sub folder

5cd41a2

refactor: KeyboardDismissableFlatListContext structure

a880f18

refactor: extract ListBehavior values to CONST

fc86471

refactor: improve comment and rename prop

54abab8

refactor: usePreventScrollOnKeyboardInteraction hook and usage

a524698

refactor: make enableAnimatedKeyboardDismissal false by default and…

dfe3a7c

… restructure type

refactor: CustomAnimatedFlatList and hook imports

df21aeb

refactor: restructure BaseInvertedFlatListProps

cf78831

refactor: remove extra import

0bd0e0a

refactor: rename and refactor offline indicator style chanes

0626f7b

refactor: InvertedFlatList event handlers

dc3d009

refactor: rename style util function

861ddc8

refactor: rename report footer styles

a6359d9

Merge branch 'main' into feat/interactive-keyboard-dismissal

cbd8310

refactor: scroll handler usage throughout multiple list components

7786ee8

roryabraham closed this Sep 29, 2025

feat: interactive keyboard dismissal #65517

feat: interactive keyboard dismissal #65517

Uh oh!

Conversation

wgsquayson commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

For Android and iOS

For other platforms

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roryabraham left a comment

Choose a reason for hiding this comment

Uh oh!

wgsquayson commented Jul 23, 2025

Uh oh!

roryabraham commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kirillzyusko commented Jul 24, 2025

Uh oh!

wgsquayson commented Jul 24, 2025

Uh oh!

github-actions bot commented Jul 25, 2025

Uh oh!

This comment has been minimized.

github-actions bot commented Jul 26, 2025

Uh oh!

github-actions bot commented Jul 26, 2025

Uh oh!

mountiny commented Jul 28, 2025

Uh oh!

parasharrajat commented Jul 29, 2025

Uh oh!

parasharrajat commented Aug 1, 2025

Uh oh!

chrispader left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Aug 7, 2025

Uh oh!

parasharrajat commented Aug 7, 2025

Uh oh!

This comment was marked as outdated.

mountiny commented Sep 25, 2025

Uh oh!

codecov bot commented Sep 25, 2025

Codecov Report

Uh oh!

wgsquayson commented Jul 4, 2025 •

edited

Loading

roryabraham commented Jul 24, 2025 •

edited

Loading

chrispader commented Sep 27, 2025 •

edited

Loading