Нативный Markdown в React Native без боли и WebView

Если вы хоть раз пробовали отобразить сложный Markdown в React Native приложении, то наверняка сталкивались с выбором из двух зол. Либо вы используете тяжеловесный WebView, который «съедает» память и тормозит скролл, либо мучаетесь с библиотеками на чистом JS, которые ломаются на первой же сложной таблице или формуле. Ребята из Software Mansion, известные по Reanimated и Gesture Handler, решили подойти к вопросу радикально и выкатили библиотеку, которая делает всё «по-настоящему».

react-native-enriched-markdown by Software Mansion

Что это такое

Проект react-native-enriched-markdown — это не просто очередной парсер. Это полноценный мост между миром Markdown и нативными текстовыми компонентами iOS, Android и macOS. Главная фишка здесь в использовании библиотеки md4c на языке C, которая компилируется в натив и обеспечивает невероятную скорость парсинга.

Библиотека разделена на две части: компонент для отображения текста и полноценное поле ввода. Это закрывает сразу все потребности — от создания ридера статей до написания мессенджера или редактора заметок.

Почему это стоит попробовать

Я выделил несколько моментов, которые заставили меня добавить этот репозиторий в закладки.

Настоящая нативность

Здесь нет WebView. Весь текст рендерится через нативные движки отрисовки (Fabric в новой архитектуре React Native). Это значит, что выделение текста, системное меню «Поделиться» или «Перевести», а также работа скринридеров для доступности (VoiceOver/TalkBack) работают из коробки так, как задумано Apple и Google.

Математика и спойлеры

Для тех, кто пишет технические тексты, завезли поддержку LaTeX. Формулы можно вставлять как в блоки $$...$$, так и инлайново через $. А если вы делаете чат, вам понравится реализация спойлеров: текст скрывается за анимированным слоем из частиц и открывается по тапу. Выглядит очень бодро.

Стриминг текста

В эпоху LLM и чат-ботов это критически важно. Библиотека умеет работать с потоковыми данными. Текст не ждет полной загрузки, а плавно дорисовывается по мере поступления чанков от нейросети. Для этого используется вспомогательная утилита react-native-streamdown от тех же авторов.

Умный ввод текста

Компонент EnrichedMarkdownTextInput — это отдельная песня. Он умеет:

Подсвечивать синтаксис прямо во время набора.
Определять состояние стилей (находится ли курсор на жирном тексте или ссылке).
Автоматически распознавать ссылки через регулярки.
Сохранять форматирование при копировании и вставке.

Техническая сторона вопроса

Проект требует использования New Architecture (Fabric). Если вы всё еще сидите на старой архитектуре, это отличный повод обновиться, так как Software Mansion явно делают ставку на будущее.

Для веба используется связка react-native-web и WebAssembly-версия парсера md4c. Это обеспечивает идентичное поведение текста на всех платформах, включая десктопный macOS. Кстати, поддержка RTL (письма справа налево) реализована на глубоком уровне: таблицы, списки и цитаты корректно зеркалятся, что редко встретишь в опенсорсных решениях.

Как это применить

Представьте, что вы пишете мобильный клиент для GitHub или технического блога. Вам нужно:

Быстро отрендерить README с таблицами и кодом.
Дать пользователю возможность оставить комментарий с форматированием.
Поддержать темную тему и системные шрифты.

С этой библиотекой код будет выглядеть примерно так:

import { EnrichedMarkdownText } from 'react-native-enriched-markdown';

const MyArticle = ({ content }) => {
  return (
    <EnrichedMarkdownText
      content={content}
      flavor="github"
      style={{
        text: { fontSize: 16, color: '#333' },
        link: { color: '#007AFF' }
      }}
    />
  );
};

Итоги

Проект выглядит очень солидно, за ним стоит команда, которая фактически формирует современный облик React Native.

Кому точно подойдет:

Разработчикам приложений с упором на контент (блоги, документация).
Создателям чат-ботов и интерфейсов для LLM.
Тем, кому важна доступность (accessibility) и нативный «фил» приложения.

Из минусов можно отметить только жесткую привязку к новой архитектуре Fabric, что может стать преградой для старых легаси-проектов. Но если вы начинаете новый проект или планируете миграцию — это, пожалуй, лучшее решение для работы с Markdown на сегодняшний день.

Посмотреть исходники и примеры можно в репозитории проекта.