Skip to content

Conversation

@patrickkabwe
Copy link
Owner

Pull Request

This PR adds native HTML rendering capabilities to NitroText, enabling rich text content from HTML strings to be rendered with full styling control and native performance.

Description

  • 30+ HTML Elements: headings (h1-h6), paragraphs, lists (ul/ol/li), inline formatting (b, i, u, s, code), links (a), semantic tags (header, footer, article, etc.)
  • Custom Styling: Override default styles per HTML tag
import { NitroText as Text } from 'react-native-nitro-text';

const html = `
  <h1>Welcome</h1>
  <p>Text with <b>bold</b>, <i>italic</i>, and <u>underline</u>.</p>
  <ul>
    <li>Item one</li>
    <li>Item with <a href="https://example.com">a link</a></li>
  </ul>
  <p>Code: <code>const x = 42;</code></p>
`;

<Text
  renderer="html"
  renderStyles={{
    h1: { fontSize: 32, fontWeight: 'bold', color: '#2F855A' },
    b: { fontWeight: 'bold', color: '#E53E3E' },
    i: { fontStyle: 'italic', color: '#3182CE' },
    u: { textDecorationStyle: 'dashed', textDecorationColor: '#38A169' },
    a: { color: '#48BB78' },
    code: { fontFamily: 'ui-monospace', color: '#805AD5' }
  }}
  selectable
>
  {html}
</Text>

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update
  • Other

Testing

  • Tested on iOS
  • Tested on Android
  • Added/updated tests

Checklist

  • Code follows project style guidelines
  • Self-review completed
  • Documentation updated (if needed)
  • No breaking changes (or clearly documented)

Additional Notes

New API:

renderer?: 'plaintext' | 'html' - Selects rendering mode (default: 'plaintext')
renderStyles?: Record<string, TextStyle> - Custom styling rules mapped to HTML tag selectors

- add Android Nitro module with Kotlin view, Fabric state updater, and JNI bridge

- share component descriptor/state logic so Fabric can hydrate props on Android

- update TypeScript entrypoint, codegen pipeline, and example app for Android support
…andling

- Implemented HTML fragment parsing to support a wider range of HTML elements and styles.
- Added functionality to trim trailing whitespace in both HTML and text content.
- Updated NitroText component to handle various inline and block elements, ensuring proper rendering and styling.
- Enhanced the example app to showcase new HTML features and improved text layout.
- Introduced NitroHtmlRenderer for better HTML parsing and rendering capabilities.
- Updated NitroTextImpl to support HTML content and fragment background colors.
- Refactored NitroText to streamline rendering logic and improve performance.
- Enhanced NitroTextView to handle link interactions more effectively.
- Improved whitespace handling in text rendering for better layout consistency.
@patrickkabwe patrickkabwe changed the title Feat/ios html support feat(ios): add html support Oct 5, 2025
@patrickkabwe patrickkabwe merged commit 02f0a9c into main Oct 5, 2025
4 checks passed
@patrickkabwe patrickkabwe deleted the feat/ios-html-support branch October 5, 2025 20:20
github-actions bot pushed a commit that referenced this pull request Oct 8, 2025
## [1.1.0-next.1](v1.0.3...v1.1.0-next.1) (2025-10-08)

### ✨ Features

* add android support ([#49](#49)) ([369ad10](369ad10))
* **android:** add html support ([#52](#52)) ([ca1ffb0](ca1ffb0))
* **ios:** add html support ([#56](#56)) ([02f0a9c](02f0a9c))

### 📚 Documentation

* add CONTRIBUTING.md and issue templates for better community engagement ([#48](#48)) ([a213abe](a213abe))
* update README.md for improved clarity and formatting ([#59](#59)) ([dbe93aa](dbe93aa))

### 🛠️ Other changes

* bum up nitro 0.29.8 ([#57](#57)) ([e550832](e550832))
@github-actions
Copy link

github-actions bot commented Oct 8, 2025

🎉 This PR is included in version 1.1.0-next.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants