Skip to content

Paywalls v2: package price text wraps character-by-character on Honor MagicOS / certain OEMs #3402

Description

@Mkrtchianz

Describe the bug

Paywalls v2 package row contains a horizontal stack with Distribution: Space Between and two children both sized as Width: Fit:

  • Left: a stack with the package title, a "Profitable" badge, and a sub-line with period · total price (e.g. 1 year · $69.99).
  • Right: a text component bound to {{ product.price_per_month }} (e.g. $5.83/mo).

On Honor Magic 7 Pro (HONOR MagicOS 10 / Android 16), the right text renders one character per line — i.e. the price column is being squeezed to ~1 character of width — regardless of the device's system font
size and display size settings (issue reproduces even at minimum font/display size). The same paywall renders correctly in the dashboard preview (Pixel 10, both EN and RU locales) and on iOS. Switching the
device language between English and Russian on the affected Honor device does not change the behavior — both wrap vertically.

It looks like the OEM's Compose layout / text-measurement on this device reports the left child as needing the full row width, leaving 0 width for the right text, which then wraps per character.

  1. Environment
    a. Platform: React Native (Expo SDK 54), react-native-purchases-ui 10.0.1, react-native-purchases 10.0.1
    b. SDK version: 10.0.1 (RN bridge) → underlying purchases-android shipped with that release
    c. OS version: HONOR Magic 7 Pro, MagicOS 10 (Android 16)
    d. Android Studio version: N/A — issue is at runtime on a physical device, paywall designed in the RevenueCat web Paywall Editor (Paywalls v2)
    e. How widespread is the issue: only reproduced on Honor MagicOS so far; iOS, Pixel emulators and the dashboard preview all render correctly. Percentage of affected users TBD — Honor / Huawei devices are a
    meaningful share in CIS / SEA / EU markets.

  2. Steps to reproduce, with a description of expected vs. actual behavior

a. In the Paywall Editor, build a package row as a horizontal stack:
    - Parent stack: Axis: horizontal, Distribution: Space Between, Width: Fill, Height: Fit.
  - Left child: stack with Width: Fit, Height: Fit, Distribution: Center containing icon + a vertical stack with title row (Yearly + Profitable badge) and sub-line (1 year · {{ product.price }}).
  - Right child: text {{ product.price_per_month }}/mo, Width: Fit, Height: Fit.
b. Publish the paywall and present it via RevenueCatUI.Paywall from react-native-purchases-ui on a real Honor Magic 7 Pro.
c. Open the paywall.

Expected: right text shows $5.83/mo on a single line, as in the dashboard preview and on iOS.

Actual: right text is broken character-by-character, each character on its own line ($, 5, ., 8, 3, /, m, o stacked vertically). Reproduces on EN and RU device locales, and at the lowest system font size /
display size.
3. Other information

- Renders correctly on: iOS (all tested), dashboard editor preview.
- Possibly related: layout measurement quirks reported on Huawei/Honor Compose builds in the past (HMS overlays, custom font metrics in HONOR Sans).

Additional context

  • App: Expo SDK 54, RN 0.81.5, React 19.1.0.
  • Paywalls v2, edited via the RevenueCat web editor.
  • Happy to share the offering/template ID and a screen recording from the affected device privately.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions