Skip to content

Per-block line wrap toggle for code blocks in the React Native package #1009

Closed

Description

@juliusmarminge

Is your feature request related to a problem? Please describe.

In the React Native package, a GitHub-flavor fenced code block at the top level of a document scrolls horizontally. That suits desktop, but on a phone a long shell command or one-line JSON means swiping back and forth inside a small box to read it. Wrapping every block isn't a fix either: wrapped code is harder to read for anything with indentation, and the reader is the one who knows which block they want wrapped.

Describe the solution you'd like

An opt-in, per-block wrap button in the code block header, next to the existing copy button:

  • An opt-in prop, enableCodeBlockWrapToggle (default false), shows a wrap button to the left of copy in each top-level fenced code block header, on iOS and Android.
  • Each block starts in the current layout, which is horizontal scrolling. Tapping the button wraps that block's lines at the block width, and tapping again goes back to scrolling. Each block toggles on its own.
  • The button has VoiceOver and TalkBack labels ("Wrap lines" / "Disable line wrap"). They are configurable through accessibilityLabels.codeBlock.wrap / .unwrap, like the other labels.
  • Measurement stays view-free:
    • The root view keeps the wrapped blocks as document-order indexes of top-level code blocks, and the measure pass reads them.
    • On iOS the indexes are part of the measurement cache key. On Android they are part of the measure hash.
    • The set resets when anything before the previous document's last line changes, so streaming (including a rewritten, unfinished last line) and task checkbox toggles keep the reader's choice.
  • Code blocks inside blockquotes and admonitions don't get the button and keep scrolling.

We have shipped this in our fork for T3 Code's mobile app: pingdotgg#1. I can open it here as a PR once you are happy with the API shape.

Describe alternatives you've considered

  • Fit it into the standalone packages' layout setting. There codeBlockLayout / markdownCodeBlockLayout defaults to wrapping, while the React Native package scrolls. The toggle only makes sense where blocks scroll, so a port to the standalone packages would show it only with scrollable, with each block starting in that layout.
  • A global layout prop, mirroring the standalone packages' codeBlockLayout / markdownCodeBlockLayout (wrapping / scrollable). This is simpler and matches the existing API, but the reader can't choose per block. If you'd rather have that, the per-block toggle could become a third mode, for example codeBlockLayout: 'scroll' | 'wrap' | 'toggle', instead of a separate boolean.
  • A controlled API, where the app owns which blocks are wrapped (wrappedCodeBlocks plus an onCodeBlockWrapChange event). It is more flexible, but every app would need state plumbing for what is basically a reading preference.

Additional context

The standalone packages already support wrapping and scrolling (#983, #972). This would bring the React Native package the same choice, made per block by the reader.

Activity

  1. juliusmarminge commented on Oct 15, 2026

    @juliusmarminge
    ContributorAuthor

    Fork implementation for reference: pingdotgg#1 (iOS + Android, React Native package only).

  2. juliusmarminge commented on Oct 16, 2026

    @juliusmarminge
    ContributorAuthor

    Opened #1010 with the implementation. Happy to reshape the API, for example as a codeBlockLayout-style mode, if you'd prefer that over the boolean.

  3. added a commit that references this issue on Oct 22, 2026
    2547e70
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