Android - Chat - UI gap shown under emoji picker grid with keyboard

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2626/folder/13176681/41236985/1103226395?sort=%2Bidentifier
Email or phone of affected tester (no customers): jsat+todayo@applausemail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Samsung Galaxy S21 Ultra/Android 15
App Component: Chat Report View

Action Performed:

1. Open Expensify Android App and log in with valid credentials
2. Go to any chat
3. Open the keyboard up
4. Tap emoji emoji picker to open emoji grid

Expected Result:

No blank space should appear at the bottom of the emoji grid when keyboard is opened

Actual Result:

A blank space appears at the bottom of the emoji grid when keyboard is opened and emoji grid is aligned to the top

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[rohit9625]

Proposal

Please re-state the problem that we are trying to solve in this issue.

A blank space appears at the bottom of the emoji grid when the keyboard is opened, and the emoji grid is aligned to the top

What is the root cause of that problem?

The position of the EmojiPicker is calculated based on the anchor position of the EmojiPickerButton that we click to open the EmojiPicker. However, when the keyboard is already visible, i.e., the composer is focused, and we press the EmojiPickerButton, then the calculation of the position of EmojiPicker happens before the keyboard is completely hidden.

That's why the anchor position of EmojiPickerButton passed here could be in the middle of the transition to the bottom:

App/src/components/EmojiPicker/EmojiPickerButton.tsx

Lines 54 to 64 in f7265ef

	showEmojiPicker({
	onModalHide,
	onEmojiSelected,
	emojiPopoverAnchor,
	anchorOrigin: {
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
	shiftVertical,
	},
	id: emojiPickerID,
	});

Hence, the EmojiPicker's calculated popover position can be slightly above sometimes, and it also varies device to device(due to how fast the keyboard hides on different devices). So, if the keyboard takes more time to hide, then the popover can be placed at the top of the screen because the initial anchor position of EmojiPickerButton is at the middle of the screen when the keyboard is visible.

Note: It doesn't happen when the composer is not already focused when pressing the EmojiPickerButton.

Screen.Recording.2026-01-04.at.11.40.21.AM.mov

However, we do have logic to dismiss the keyboard before calculating the anchor position for EmojiPicker:

App/src/components/EmojiPicker/EmojiPicker.tsx

Lines 120 to 123 in f7265ef

	KeyboardUtils.dismiss(true).then(() =>
	calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
	close(() => {
	onWillShow?.();

But it doesn't work reliably on Android because the dismiss function relies on the keyboardDidHide event from react-native:

App/src/utils/keyboard/index.android.ts

Lines 24 to 39 in f7265ef

	const dismiss = (shouldSkipSafari?: boolean): Promise<void> => {
	return new Promise((resolve) => {
	if (!isVisible) {
	resolve();
	return;
	}
	const subscription = Keyboard.addListener('keyboardDidHide', () => {
	resolve();
	subscription.remove();
	});
	Keyboard.dismiss();
	});
	};

And, the keyboardDidHide event triggers as soon as the Keyboard.dismiss() function is called, i.e., before the keyboard is completely hidden. However, the keyboardDidHide event should be triggered only after the keyboard is completely hidden, similar to iOS. Notice the logs timing on the iOS and Android:

Screen.Recording.2026-01-04.at.12.07.42.PM.mov

Hence, the issue is reproducible for Android devices only.

What changes do you think we should make in order to solve the problem?

We had a similar issue(#70692) in the past where the EmojiPicker was shown at the top of the StatusPage. That's why the dismissKeyboardAndExecute function was created in PR(#71323). This function uses KeyboardEvents from react-native-keyboard-controller for Android(index.android.ts) and resolves immediately for iOS(index.ts) because issue not reproducible for iOS:

App/src/utils/keyboard/index.android.ts

Lines 41 to 60 in f7265ef

	const dismissKeyboardAndExecute = (cb: () => void): Promise<void> => {
	return new Promise((resolve) => {
	if (!isVisible) {
	cb();
	resolve();
	return;
	}
	const keyboardDidHideSubscription = KeyboardEvents.addListener('keyboardDidHide', (e: SimplifiedKeyboardEvent) => {
	if (e.height !== 0) {
	resolve();
	return;
	}
	cb();
	keyboardDidHideSubscription.remove();
	resolve();
	});
	Keyboard.dismiss();
	});
	};

App/src/utils/keyboard/index.ts

Lines 40 to 46 in f7265ef

	const dismissKeyboardAndExecute = (cb: () => void): Promise<void> => {
	return new Promise((resolve) => {
	// For iOS and other platforms, execute callback immediately
	cb();
	resolve();
	});
	};

So, we can simply update the code at the EmojiPickerButton to dismiss the keyboard using the dismissKeyboardAndExecute function before calling showEmojiPicker, similar to EmojiPickerButtonDropdown:

App/src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

Lines 53 to 55 in f7265ef

	KeyboardUtils.dismissKeyboardAndExecute(() => {
	showEmojiPicker({
	onModalHide,

Results:

Screen.Recording.2026-01-04.at.12.32.11.PM.mov

Note: There's still some flickering in the EmojiPicker popover when opening it. It seems like a different issue as it also happens for the EmojiPickerButtonDropdown at the StatusPage. This is some rendering issue and should be handled separately because fixing this won't fix the UI gap issue, and vice versa.

What alternative solutions did you explore? (Optional)

Alternatively, we can update the dismiss function at here:

App/src/utils/keyboard/index.android.ts

Lines 24 to 39 in f7265ef

	const dismiss = (shouldSkipSafari?: boolean): Promise<void> => {
	return new Promise((resolve) => {
	if (!isVisible) {
	resolve();
	return;
	}
	const subscription = Keyboard.addListener('keyboardDidHide', () => {
	resolve();
	subscription.remove();
	});
	Keyboard.dismiss();
	});
	};

To use the KeyboardEvents from react-native-keyboard-controller instead of the react-native's event:

-        const subscription = Keyboard.addListener('keyboardDidHide', () => {
+        const subscription = KeyboardEvents.addListener('keyboardDidHide', () => {
             resolve();
             subscription.remove();
         });

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.