Skip to content

Android draws mixed nested list markers over their text #1004

Closed

Description

@mwolson

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be
    already fixed.
  • I tested using a
    supported version
    of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

On Android, a nested list whose marker type differs from its parent's gets the
wrong space between marker and text. A numbered list under a bullet draws 1.
over the first letters of its items, checkboxes under a bullet touch their text,
and bullets under a short 1. sit far from theirs. iOS renders the same
Markdown with the usual gap.

The repo's own Android baseline for mixed_nested_list_test already shows it
("1Django", "2FastAPI"), while the iOS baseline does not:

Android baseline on main iOS baseline on main

The standalone enriched-markdown-android package has the same layout rule, and
its androidExample baseline for the same flow shows the same overlap.

Nested spans past the first level use a fixed marginLeft for their text
indent, while each one draws its marker from its own marker column. When a
child's column is wider than its parent's (a number under a bullet), the marker
runs into the text; when it is narrower, the gap grows.

Android (repro app) iOS (repro app)

Library version

1.1.1

Environment info

System:
  OS: macOS 27.0.1
  CPU: (12) arm64 Apple M4 Pro
Binaries:
  Node:
    version: 24.22.0
  npm:
    version: 11.19.1
Languages:
  Java:
    version: 17.0.20
npmPackages:
  react:
    installed: 19.2.3
  react-native:
    installed: 0.86.3

Expo SDK 57. Android was tested on an API 36 Pixel 9 emulator built on Linux,
iOS on an iOS 26.5 iPhone 17 Simulator.

Steps to reproduce

  1. Render, with flavor="github":

    - Python
      1. Django
      2. FastAPI
    
    1. Ordered parent
       - Bullet child
    
    - Bullet parent
      - [ ] Unchecked task child
      - [x] Checked task child
  2. On Android, 1. overlaps "Django", the checkboxes touch their text, and
    "Bullet child" sits far from its bullet. iOS shows each marker with the usual
    gap.

Reproducible example repository

https://github.com/mwolson/tmp-enriched-markdown-issues/tree/main/android-mixed-nested-list-indent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions