[$125] Hybrid- Code markdown have square shape

[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: v9.1.33-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #59328
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy s10/ Android 12, IPhone 11 / IOS 18.3.2
App Component: Chat Report View

Action Performed:

1. Open Hybrid app
2. Go to 1:1 Chat
3. Write something in code markdown (eg. aaa ) or send a expense and add the markdown in description
4. Send the message or Go to the transaction thread of the expense if you create expense

Expected Result:

The count markdown have curve at the edge.(other environments behavior)

Actual Result:

The count markdown is square in shape with no curve.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6815662_1745873867857.Screen_Recording_20250428_235301_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021918113780736378522
• Upwork Job ID: 1918113780736378522
• Last Price Increase: 2025-05-16

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

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

[thelullabyy]

Proposal

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

• The count markdown is square in shape with no curve.

What is the root cause of that problem?

• The current method to apply the markdown container style doesn't work in case of native:
  

  App/src/components/InlineCodeBlock/index.native.tsx

  Line 30 in 1d48288

  <Text style={[boxModelStyle, textStyle]}>{data}</Text>

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

• We can update to:

            <View>
                <Text style={[boxModelStyle, textStyle]}>{data}</Text>
            </View>

or

            <View style={[boxModelStyle]}>
                <Text style={[ textStyle]}>{data}</Text>
            </View>

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

• NA

What alternative solutions did you explore? (Optional)

[VictoriaExpensify]

I think we should fix this, but it seems like a fairly low priority and a fairly easy fix, so I'm going to change the bounty to $125

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)