Paywalls V2 (Android): inline/partial bold markdown (**word**) renders as literal asterisks — whole-node bold toggle works fine

Open
#1,968 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
62/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
android, markdown, react-native, typescript

Research direction

Start by tracing the shared markdown-to-paragraph pipeline referenced in PR #4194, focusing on how mixed bold and regular runs are built for Android. Reproduce the supplied partial-bold example on a physical Android device, then verify that the asterisks disappear, only the intended phrase is bold, and whole-node bold still works.

Written by the indexing model from the issue text.

Description

Summary

The RevenueCat Paywall Builder offers two distinct ways to get bold text:
(a) a component-level "Bold" style toggle that sets fontWeight for the ENTIRE
text node, and (b) inline markdown syntax (**word**) used to bold only
PART of a paragraph, leaving the rest of the sentence in regular weight.

On Android, (a) renders correctly. (b) does not — the literal **
characters are shown instead of the enclosed word/phrase being bolded,
whenever the bold markdown covers only part of a paragraph rather than the
whole text node.

Steps to reproduce

  1. In the RevenueCat dashboard Paywall Builder, on a plain-text component,
    type a sentence where only part of it should be bold via markdown, e.g.:
    **Nothing due today.** We'll remind you before your trial ends.
    (do NOT use the separate whole-node Bold style toggle — use inline **)
  2. Build and run on a real Android device.
  3. The literal **Nothing due today.** renders with visible asterisks
    instead of "Nothing due today." appearing bold and the rest regular.

Expected

Inline/partial bold markdown renders as a mixed-weight run within the
paragraph (bold segment + regular segment), matching the dashboard preview
and matching how the whole-node Bold toggle already renders correctly.

Actual

Literal ** characters appear in place of the intended bold segment. A
stray/garbled glyph also appears adjacent to the asterisks in our case
(possibly an unrelated paste artifact, noted for completeness only).

Environment

  • react-native-purchases / react-native-purchases-ui: 10.10.0
    (upgraded from 10.4.0 specifically to test whether this was already fixed —
    it was not)
  • Resolves to purchases-hybrid-common-ui 19.0.0 (purchases-android ~10.21.x)
  • Platform: Android, physical device
  • Not yet compared against iOS with identical paywall content

Additional context

This looks like it may be specific to building a MIXED-run AnnotatedString
(partial bold + partial regular within one paragraph) rather than applying a
single uniform style to a whole node — the whole-node Bold toggle sidesteps
this entirely since it never needs mixed runs. Flagging PR #4194
("Memoize Markdown parsing and paragraph text building", merged into
v10.21.0 — the exact version now in use) since it rewrites the shared
markdown-to-paragraph pipeline that would build these mixed runs, though
I haven't confirmed via bisection that it's a regression.

Dominant language
TypeScript
Stars
1.2k
Forks
117
Avg merge
14h 40m
Merged PRs (30d)
40

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from RevenueCat/react-native-purchases

All issues in RevenueCat/react-native-purchases

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.