[HOLD facebook/react-native#37397][$1000] Back ticks aren't centered vertically

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Send few messages with back ticks

Expected Result:

Back ticks should be centered vertically

Actual Result:

Back ticks aren't centered vertically

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS

Version Number: 1.1.42-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @AndrewGable
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1646420349264159
Upwork: https://www.upwork.com/jobs/~01be27e71047382c31

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[MelvinBot]

Current assignee @stitesExpensify is eligible for the Exported assigner, not assigning anyone new.

[mallenexpensify]

Posted https://www.upwork.com/jobs/~012344f1febdbac925

[Phantom-2]

Proposal

in src/styles/styles.js

        code: {
            ...baseCodeTagStyles,
            ...codeStyles.codeTextStyle,
            paddingLeft: 5,
            paddingRight: 5,
            fontFamily: fontFamily.MONOSPACE,
            fontSize: 13,
+           paddingTop:1,

        },

        img: {
            borderColor: themeColors.border,
            borderRadius: variables.componentBorderRadiusNormal,
            borderWidth: 1,
        },

[mallenexpensify]

@Phantom-2 , apologies for the delay, @Santhosh-Sellavel can you please review the proposal above?

[Santhosh-Sellavel]

Sorry I didn’t leave a comment earlier.
This would make some unintended style break in other platforms.

[Santhosh-Sellavel]

Also, I tried to reproduce this on my end today, it's not occurring for me.

Can you check on the latest staging or production build, is the issue still occurring for you?
@AndrewGable

If reproducible, share me device modal & iOS version, thanks!

cc: @mallenexpensify @stitesExpensify

[AndrewGable]

@mvtglobally - Can you have some testers try to reproduce? If if it's not reproducible, agree let's close.

[stitesExpensify]

@mvtglobally was this reproducible?

[Santhosh-Sellavel]

@mvtglobally Any update on this?

[mallenexpensify]

Pinged @mvtglobally in NewDot to take a look

[mvtglobally]

checking, Sorry for the delay. for some reason I missed this one.

[mvtglobally]

Looks like I was unsubscribed from this issue alerts. I did not mean this.
Trying this right now, I am not able to use back-ticks on the multiline or paragraphs. If you use straight text, it is looking aligned

[sonialiap]

Expensify/react-native#43 is still in process so this one's on hold

[sonialiap]

@roryabraham Expensify/react-native#43 was closed, did the solution get moved to facebook/react-native#37397? I'm wondering if this issue should still be on hold for one of those PRs

[fabioh8010]

@sonialiap @roryabraham Yes, solution was moved to facebook/react-native#37397. Once that PR get approved and merged we will be able to fix this one. We can take either one of the following paths:

1. Wait for Add substring measurements for Text facebook/react-native#37397 to fix this issue.
2. Proceed with my PR [HOLD] fix: improve mobile's inline code block font and alignment #15367 which is on HOLD for now. My PR is just a temporary workaround and the fix is not visually perfect, so it may not be the best approach to follow.
3. Based on this discussion on Slack, simplify the code block styling in a way that won't cause the issue anymore, but it's a design change and needs approval from the design team.
4. Explore other solutions on native side like the one I suggested, that I ended up stopping the investigation because Inline code block support react-native#43 was being worked on.

[stitesExpensify]

I think we should still just wait for facebook/react-native#37397. This isn't that big of a deal.

[stitesExpensify]

cc @shawnborton in case you feel differently and we should really change this soon. In which case 3 from this comment would be a potential good solution.

[shawnborton]

I am cool with waiting.

[sonialiap]

No update on facebook/react-native#37397

[sonialiap]

No update

[stitesExpensify]

No update. I think we should just close this for now. Thoughts?

[trjExpensify]

👋 Can we put the repo/issue we're holding on in the issue title please? Coming here from a dupe and it's easier to follow the dependencies when that's present in the title. Thanks!

[sonialiap]

@stitesExpensify do we have any way to push the upstream PR forward? If not, is it worth keeping our issue open when the /react-native hasn't been commented on since June?

[stitesExpensify]

do we have any way to push the upstream PR forward?

Not really unless we want to divert expert contributor resources to this (which we shouldn't do IMO). I think we should just close this for now and come back to it later.