Skip to content

iOS: CodeBlock background border-radius randomly clips at the bottom #354

@graddotdev

Description

@graddotdev

Describe the bug
When rendering a code block using <EnrichedMarkdownText>, the bottom border radius of the code block's background intermittently disappears and gets clipped off. This depends on the exact number of lines inside the code block. Adding or removing just one line of text toggles the border radius between rendering correctly and rendering with sharp, clipped bottom corners.

To Reproduce
Steps to reproduce the behavior:

  1. Render the code provided below with the markdown string.
  2. Observe the bottom corners of the code block.
  3. Add one more // one more line to the markdown string and save.
  4. See the error: the bottom rounded corners are now clipped/squared off.
  5. Add another // one more line and observe that the rounded corners correctly return.
Code to reproduce
import { EnrichedMarkdownText } from "react-native-enriched-markdown";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

const md = `
\`\`\`
// server.mjs
import { createServer } from 'node:http';

const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World!\\n');
});

// starts a simple http server locally on port 3000
server.listen(3000, '127.0.0.1', () => {
  console.log('Listening on 127.0.0.1:3000');
});

// run with "node server.mjs"

// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
// one more line
\`\`\`
`;

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <EnrichedMarkdownText
          markdown={md}
          markdownStyle={{ codeBlock: { borderRadius: 12 } }}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

Expected behavior
The code block should always maintain its full border radius at the bottom, regardless of the specific number of lines or characters inside the block.

Screenshots
Image

Device:

  • Device: iPhone 16 Pro Max
  • OS: iOS 26.5
  • Version: 0.6.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions