[$250] iOS - Chat - Emoji picker jumps when the keyboard is open

[mitarachim]

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.1.12.2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: iPhone 13 / 18.3.1
App Component: Chat Report View

Action Performed:

1. Open the app
2. Open any chat
3. Tap the composer to open the keyboard
4. Tap the emoji to open the emoji picker

Expected Result:

The emoji picker doesn't jump

Actual Result:

The emoji picker jumps when the keyboard is open

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6769148_1741815276072.ScreenRecording_03-12-2025_16-23-25_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021901977879716014852
• Upwork Job ID: 1901977879716014852
• Last Price Increase: 2025-03-18
• Automatic offers:
• daledah | Contributor | 106664913

Issue Owner

Current Issue Owner: @thienlnam

[daledah]

Proposal

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

The emoji picker jumps when the keyboard is open

What is the root cause of that problem?

In the condition controlling the bottom safe area padding:

App/src/components/Modal/BaseModal.tsx

Line 217 in 9d1bc97

shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,

it returns true when the keyboard is not shown using !keyboardStateContextValue?.isKeyboardShown.

When the composer is focused and the user taps the emoji button to open the emoji picker modal, keyboardStateContextValue?.isKeyboardShown doesn’t immediately update to false. As a result, the safe area padding isn’t applied. Once keyboardStateContextValue?.isKeyboardShown finally updates to false, the padding gets applied, causing the UI to jump.

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

Export two new states from withKeyboardState:

    /** Whether the keyboard is about to show */
    isKeyboardWillShow: boolean;

    /** Whether the keyboard is about to hide */
    isKeyboardWillHide: boolean;

    const [isKeyboardWillShow, setIsKeyboardWillShow] = useState(false);
    const [isKeyboardWillHide, setIsKeyboardWillHide] = useState(false);
    useEffect(() => {
        const keyboardDidShowListener = KeyboardEvents.addListener('keyboardDidShow', (e) => {
            setKeyboardHeight(getKeyboardHeight(e.height, bottom));
            setIsKeyboardWillShow(false);
        });
        const keyboardDidHideListener = KeyboardEvents.addListener('keyboardDidHide', () => {
            setKeyboardHeight(0);
            setIsKeyboardWillHide(false);
        });
        const keyboardWillShowListener = KeyboardEvents.addListener('keyboardWillShow', () => {
            setIsKeyboardWillShow(true);
            setIsKeyboardWillHide(false);
        });
        const keyboardWillHideListener = KeyboardEvents.addListener('keyboardWillHide', () => {
            setIsKeyboardWillHide(true);
            setIsKeyboardWillShow(false);
        });

        return () => {
            keyboardDidShowListener.remove();
            keyboardDidHideListener.remove();
            keyboardWillShowListener.remove();
            keyboardWillHideListener.remove();
        };
    }, [bottom]);

    const contextValue = useMemo(
        () => ({
            keyboardHeight,
            isKeyboardShown: keyboardHeight !== 0,
            isKeyboardAnimatingRef,
            isKeyboardWillShow,
            isKeyboardWillHide,
        }),
        [keyboardHeight, isKeyboardWillShow, isKeyboardWillHide],
    );

And use these new states in:

App/src/components/Modal/BaseModal.tsx

Line 217 in 9d1bc97

shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,

              shouldAddBottomSafeAreaPadding:
                  (!avoidKeyboard ||
                      (!keyboardStateContextValue?.isKeyboardShown && !keyboardStateContextValue.isKeyboardWillShow) ||
                      (keyboardStateContextValue.isKeyboardShown && keyboardStateContextValue.isKeyboardWillHide)) &&
                  shouldAddBottomSafeAreaPadding,

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

We can ensure the keyboard fully closes before opening the emoji picker modal by calling this function inside KeyboardUtils.dismiss().then(). This way, the emoji picker only opens after the keyboard state updates correctly, preventing the jump effect.

Since this issue only occurs on native platforms, we can limit the fix to those platforms specifically.

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[melvin-bot]

@bfitzexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021901977879716014852