Android - Emoji is clipped at the top in report title

[IuliiaHerets]

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.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #76278
Issue reported by: Applause internal team

Action Performed:

1. Open android app
2. Create a report
3. Navigate to the report
4. Edit the report title, add an emoji

Expected Result:

The emoji should not getting clipped at the top in report title while editing

Actual Result:

The emoji is getting clipped at the top in report title while editing

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Bug7021002_1764878074097.Recording__135.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When users edit a report title on Android and add an emoji, the emoji gets clipped at the top while editing.

What is the root cause of that problem?

The root cause has two parts:

Part 1: Container Styling with Vertical Centering

In App/src/styles/index.ts (lines 1232-1243), the textInputContainer style has:

textInputContainer: {
    flex: 1,
    justifyContent: 'center',  // ← Centers content vertically
    height: '100%',
    backgroundColor: theme.appBG,
    overflow: 'hidden',
    borderWidth: 1,
    padding: 8,              // ← 8px padding on all sides
    paddingBottom: 0,         // ← But bottom padding is removed
    borderRadius: 8,
    borderColor: theme.border,
},

The container uses justifyContent: 'center' which vertically centers the TextInput content. It has padding: 8 on all sides, but paddingBottom: 0 removes the bottom padding.

Part 2: TextInput Vertical Padding Removal on Android

In App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx (line 378), the TextInput style removes vertical padding when there's a label:

style={[
    styles.flex1,
    styles.w100,
    inputStyle,
    (!hasLabel || isMultiline) && styles.pv0,  // ← Removes vertical padding when label exists
    inputPaddingLeft,
    inputPaddingRight,
    inputProps.secureTextEntry && styles.secureInput,

    // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
    // once it exceeds the input space on iOS (See https://github.com/Expensify/App/issues/13802)
    shouldApplyHeight && {height, lineHeight: undefined},

    // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
    ...(autoGrowHeight && !isAutoGrowHeightMarkdown
        ? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
        : []),
    isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
    // Add disabled color theme when field is not editable.
    inputProps.disabled && styles.textInputDisabled,
    styles.pointerEventsAuto,
]}

Why emojis get clipped:

1. The container has justifyContent: 'center' which centers the TextInput vertically
2. The TextInput has styles.pv0 applied (paddingVertical: 0) when hasLabel is true and it's not multiline
3. Emojis have a larger font height than regular text characters
4. With no vertical padding on the TextInput and vertical centering in the container, emojis that extend above the baseline get clipped at the top
5. The container's padding: 8 provides some space, but it's not enough for emojis which can extend beyond the normal text bounds

The emoji's top portion extends beyond the TextInput bounds and gets clipped by the container's overflow: 'hidden'.

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

The solution is to add Android-specific top padding to the TextInput when it has a label and is not multiline. This provides enough space for emojis to render without clipping.

File: App/src/components/TextInput/BaseTextInput/implementation/index.native.tsx

Step 1: Import Platform (add to imports at top of file, around line 4):

import {Platform, StyleSheet, View} from 'react-native';

Step 2: Modify the TextInput style array (around line 374-395):

style={[
    styles.flex1,
    styles.w100,
    inputStyle,
    (!hasLabel || isMultiline) && styles.pv0,
    // Fix for Android emoji clipping: Add top padding for single-line inputs with labels
    // Emojis have larger font height and need extra space to prevent clipping at the top
    Platform.OS === 'android' && hasLabel && !isMultiline && {paddingTop: 4},
    inputPaddingLeft,
    inputPaddingRight,
    inputProps.secureTextEntry && styles.secureInput,

    // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
    // once it exceeds the input space on iOS (See https://github.com/Expensify/App/issues/13802)
    shouldApplyHeight && {height, lineHeight: undefined},

    // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
    ...(autoGrowHeight && !isAutoGrowHeightMarkdown
        ? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
        : []),
    isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
    // Add disabled color theme when field is not editable.
    inputProps.disabled && styles.textInputDisabled,
    styles.pointerEventsAuto,
]}

What alternative solutions did you explore? (Optional)

None