[iOS & Android] Enable borderRadius in all mention types

[war-in]

Details

This PR adds support for borderRadius prop in mentions styles on iOS & Android

Related Issues

https://github.com/Expensify/App/issues/19299

Manual Tests

iOS & Android:

1. Verify if singleline mentions have rounded edges
2. Verify if multiline mentions have rounded edges only at the beginning and the end
3. Verify mentions work correctly in blockquotes

Linked PRs

[war-in]

I fixed last known iOS issue in this commit - https://github.com/Expensify/react-native-live-markdown/pull/720/commits/28b6a13e75c87782d3fc54824d47329db9599fae

Before

After

[jmusial]

Very much a nitpick, but when having a multiline mention starting bottom border radius and finish top, should not apply. Same issue for web

[jmusial]

Na ios dzieją się rzeczy niestworzone :( Ale to też single - line

to jest 17.5, nie wiem czy to ma znaczenie

https://github.com/user-attachments/assets/2fc0da71-3841-4968-82b3-cbb8e1a62b8d

[war-in]

Very much a nitpick, but when having a multiline mention starting bottom border radius and finish top, should not apply. Same issue for web

We can try to fix it in a separate PR but I think we need to consult with the design team. I'll leave it as an open idea because it's not in the scope of this PR

Thanks for noticing!

[war-in]

1. android, switching to single line breaks highlights :(

@jmusial should be fixed with the latest commit 🎉 https://github.com/Expensify/react-native-live-markdown/pull/720/commits/98dafdaaf9f2d9bd92df4dcd3e0c88222d481469

2. android, Cursor not visible when within codeblock or mention

this is expected behaviour. We discussed it with the design team and there is no plan to support it in the near future

[tomekzaw]

2. android, Cursor not visible when within codeblock or mention

For the context, this was discussed on Slack: https://swmansion.slack.com/archives/C01GTK53T8Q/p1755699466781499

[war-in]

@tomekzaw @parasharrajat @Skalakid PR's ready for review 🎉

Please review it carefully and ask me any questions because the solution is quite complicated in a few places. If you think adding comments would be valuable let me know!

[war-in]

@parasharrajat kind bump :)

[war-in]

@parasharrajat can we get a final ✅? All comments have been answered!

[parasharrajat]

BUG: Android: Cursor shows behind the background.

https://github.com/user-attachments/assets/8a8b9713-1d3f-4925-8c14-3424ef687a82

[parasharrajat]

How do I build iOS build locally?

"@expensify/react-native-live-markdown": "git://github.com/Expensify/react-native-live-markdown#eb521b53582165d532918ca64b859210dc92bf09",

I installed the latest commit for this package on NewDot repo, and it worked for Android. But for iOS, the app is downloading the app from the remote cache.

[war-in]

BUG: Android: Cursor shows behind the background

We know about the issue and already reported it. It was put on hold at the time but we could revisit this idea in another issue/thread. Marking as unrelated for now!

[war-in]

But for iOS, the app is downloading the app from the remote cache.

@parasharrajat I'd probably remove the GITHUB_TOKEN entry from my .env to achieve that. This should be the easiest way to disable remote builds

[parasharrajat]

~Nice idea. I will try that.~ Won't work

Now the builds are coming from S3.

[war-in]

Ok, so another quick one - I'd add a dummy log to some ~android~ iOS file to change the fingerprint. That should work

[parasharrajat]

iOS looks good.

[parasharrajat]

@war-in So we are not targeting this https://github.com/Expensify/react-native-live-markdown/pull/720#issuecomment-3602206125 here in this PR. Do we have approval for this from internal team?

@puneetlath What do you say?

[parasharrajat]

Screenshots

:black_square_button: iOS / native

https://github.com/user-attachments/assets/2069491a-8ce7-493d-a1c8-5c1c528fbd0f

:black_square_button: MacOS / Chrome

:black_square_button: Android / native

https://github.com/user-attachments/assets/e4949c67-55f7-4a58-ba87-93ecd2891d67

[war-in]

@war-in So we are not targeting this https://github.com/Expensify/react-native-live-markdown/pull/720#issuecomment-3602206125 here in this PR. Do we have approval for this from internal team?

Do we have approval for this

@parasharrajat which this are you referring to here? approval for not including the fix in this PR or approval for handling this in another issue?

[parasharrajat]

approval for not including the fix in this PR or approval for handling this in another issue?

Both are the same. We will have to fix that. The question is where. This Pr or another issue.

So we need to clarify that first before moving forward.

[puneetlath]

Sorry, the Slack link above doesn't work for me. Is that a bug this PR introduces? Or it already exists?

[war-in]

introduced by this.

@parasharrajat No, it's not. I downloaded the prod version from google play and this is how it behaves right now (see not-rounded corners) So this behaviour is not introduced by this PR

https://github.com/user-attachments/assets/7e9e80b7-c2f4-4b7f-84c9-eea2f8173c30

cc @puneetlath (you can enter the slack link by copying it and pasting in a slack conversation e.g. self dm)

[parasharrajat]

Ah, I see. Thanks for correcting me. Then we are fine with this PR.

[os-botify[bot]]

:rocket: Published to npm in 0.1.317 :tada: