Repository navigation
Description
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(defaultfalse), 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/markdownCodeBlockLayoutdefaults towrapping, 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 withscrollable, 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 examplecodeBlockLayout: 'scroll' | 'wrap' | 'toggle', instead of a separate boolean. - A controlled API, where the app owns which blocks are wrapped (
wrappedCodeBlocksplus anonCodeBlockWrapChangeevent). 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
juliusmarminge commentedon Oct 15, 2026
Fork implementation for reference: pingdotgg#1 (iOS + Android, React Native package only).
juliusmarminge commentedon Oct 16, 2026
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.feat: add a per-block line wrap toggle to code block headers (softwar…