Skip to content

Trailing bottom margin on last block (paragraph/list) causes extra spacing #21

@zollipaul

Description

@zollipaul

Problem
The last rendered block always keeps a bottom margin (e.g., 4px), so StreamdownRN leaves extra space at the end even when the container has no padding. This is especially visible with short content or list-only messages.

Where it comes from

Steps to reproduce

  1. Render a single paragraph or list with StreamdownRN.
  2. Set theme.spacing.block to a small value (e.g., 4).
  3. Observe extra spacing after the last block.

Example:

<StreamdownRN
  theme={{
    colors: { /* … */ },
    fonts: { /* … */ },
    spacing: { block: 4, inline: 4, indent: 16 }
  }}
  isComplete
>
  {'Hello world'}
</StreamdownRN>

Expected
No trailing bottom margin on the final rendered block.

Actual
A bottom margin equal to theme.spacing.block (and 4px for last list item) remains.

Environment

  • streamdown-rn: ^0.2.1
  • React Native / Expo (app-side)

Suggested fix
Add a way to drop spacing on the final block, e.g.: Pass isLastBlock from StreamdownRN to StableBlock / ActiveBlock. In ASTRenderer, conditionally set marginBottom: 0 when isLastBlock is true. Also set list row margin to index < last ? 4 : 0 in renderList.

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