[HOLD for payment 2021-12-28] iOS - Emoji top is cut in LHN message preview

[isagoico]

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

---

Action Performed:

1. Navigate to a conversation
2. Send a emoji
3. Check the LHN message preview

Expected Result:

Emoji should be fully displayed.

Actual Result:

Emoji is cut on the top in LHN message preview.

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

• iOS

Version Number: 1.1.15-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @sidferreira
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1637363252343600

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @yuwenmemon (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[sidferreira]

Found while addressing #6096 with #6289. I believe the fix indeed requires some lineHeight/height calibration

[MelvinBot]

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

[MelvinBot]

@yuwenmemon 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[MelvinBot]

@yuwenmemon 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[sidferreira]

Proposal

The text in question has fontSize:13; lineHeight: 16; height: 16, so, if we had a view around that, it would have a height: 16.

Now, using the following image for reference:

Which is basically:

1: <Text style={{fontSize: 13}}>FS 13 📞</Text>
2: <Text style={{fontSize: 13, lineHeight: 18, height: 16}}>FS 13 📞 LH+H 16</Text>
3: <Text style={{fontSize: 13, lineHeight: 17, height: 17}}>FS 13 📞 LH+H 17</Text>
4: <Text style={{fontSize: 13, lineHeight: 18, height: 18}}>FS 13 📞 LH+H 18</Text>
5: <RNText style={{fontSize: 13}}>FS 13 📞</RNText>
6: <RNText style={{fontSize: 13, lineHeight: 18, height: 16}}>FS 13 📞 LH+H 16</RNText>
7: <RNText style={{fontSize: 13, lineHeight: 17, height: 17}}>FS 13 📞 LH+H 17</RNText>
8: <RNText style={{fontSize: 13, lineHeight: 18, height: 18}}>FS 13 📞 LH+H 18</RNText>

Lines 1 and 5 show the current behavior, using both Exp's and React Native's .
Line 1 would have heigh 21 (automatically calculated by the OS).
Lines 2 and 6 show the current behavior, cutting a bit of the emoji
Lines 3/4 and 7/8 show small improvements until the emoji is properly drawn.

I'm not sure why, but even using RN's default component we have emoji cut out depending on the height/lineHeight.

To fix this, we need to tweak optionAlternateText in 3 places:

Use case 1

App/src/pages/home/HeaderView.js

Lines 151 to 159 in ecce012

	<ExpensifyText
	style={[
	styles.sidebarLinkText,
	styles.optionAlternateText,
	styles.textLabelSupporting,
	styles.mt1,
	]}
	numberOfLines={1}
	>

Use case 2

App/src/pages/home/sidebar/OptionRow.js

Line 95 in 0311b18

: [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.mt1];

Have a total height 20 as the component height is 16 and mt1 is 4.

Use case 3

App/src/pages/ReportDetailsPage.js

Lines 147 to 155 in ecce012

	<ExpensifyText
	style={[
	styles.sidebarLinkText,
	styles.optionAlternateText,
	styles.textLabelSupporting,
	styles.mb6,
	]}
	numberOfLines={1}
	>

Has a total height 40 as the component height is 16 and mt6 is 24

So, my suggestion is to:
A) change optionAlternateText to have lineHeight/height: 20, behaving kinda like mt1 by default
B) Remove mt1 from use cases 1 and 2
C) Change mb6 to mb5 in use case 3

This change will make sure that all items keep their designed heights but allow space to emoji wherever is needed.

[MelvinBot]

Triggered auto assignment to @jliexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.