rich-text

Implement rich text editing and Markdown rendering in React Native.

265|12|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/software-mansion-labs/skills --skill rich-text-software-mansion-labs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rich-text
Source: https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/rich-text
Command: npx skills add https://github.com/software-mansion-labs/skills --skill rich-text-software-mansion-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building polished rich-text interfaces in React Native is challenging without native editors and robust Markdown rendering. This guide consolidates best practices for using react-native-enriched for editing and react-native-enriched-markdown for rendering, ensuring consistent UX and performance across platforms.

Core Features & Use Cases

  • Editing with EnrichedTextInput: native, high-performance rich-text editing (bold, italic, mentions, links) without reliance on React state for value.
  • Rendering with EnrichedMarkdownText: fast, native Markdown rendering (no WebView) suitable for chat messages, docs, and content feeds, with optional GFM features via flavor.
  • Interoperability: combine both libraries to support editing and displaying the same content in a seamless workflow across iOS and Android.

Quick Start

Install react-native-enriched and react-native-enriched-markdown, then start building a Rich Text Editor or Markdown display using EnrichedTextInput and EnrichedMarkdownText.

Frequently Asked Questions about rich-text

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render Markdown in React Native without using a WebView?

You can render Markdown in React Native without a WebView by using native rendering components that parse and display formatted text directly, ensuring fast performance for chat messages and content feeds across iOS and Android.

How do I build a rich text editor in React Native that supports mentions and inline styling?

You can build a rich text editor in React Native with mentions and inline styling by using native input components that handle text formatting without relying on React state for value, ensuring high performance during editing.

What is the best way to display Markdown with LaTeX support in a React Native app?

The best way to display Markdown with LaTeX support in a React Native app involves using specialized rendering libraries that natively parse GFM features and LaTeX syntax, providing consistent UI across both iOS and Android platforms.

Does React Native rich text editing work with the Fabric architecture?

Yes, React Native rich text editing can work with the Fabric architecture, but it requires using libraries specifically designed for Fabric compatibility to ensure native rendering and editing components function correctly across platforms.

How do I combine rich text editing and Markdown rendering in a React Native workflow?

You can combine rich text editing and Markdown rendering in a React Native workflow by using interoperable libraries that allow the same content to be edited and displayed seamlessly, ensuring consistent data formats between input and output components.

What are the performance considerations for rendering Markdown in React Native chat applications?

Key performance considerations for rendering Markdown in React Native chat applications include avoiding WebView usage, minimizing React state reliance for text values, and using native rendering components to maintain smooth scrolling and fast display times.