Getting Started

Requirements

• React Native ≥ 0.74 with the New Architecture (Fabric) enabled — bare RN or Expo.
• React ≥ 18.2.

Install

The packages publish to the public npm registry under the @quanta-studio scope — no .npmrc and no authentication needed:

npm install @quanta-studio/react-native-richtext
# pulls @quanta-studio/react-native-richtext-{dom,css,core} transitively

It’s a normal dependency resolved from node_modules — no Metro config change needed.

First render

import { SafeAreaView, ScrollView } from 'react-native'
import { RichText } from '@quanta-studio/react-native-richtext'

const html = `
  <h1>react-native-richtext</h1>
  <p>A <strong>Fabric-native</strong> HTML renderer with <em>inline styles</em>,
     <a href="https://example.com">links</a>, and lists:</p>
  <ul><li>first item</li><li>second item</li></ul>
  <blockquote>A short quote &mdash; rendered natively.</blockquote>
`

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <RichText
          source={{ html }}
          baseStyle={{ fontSize: 16, color: '#1a1a1a' }}
          onLinkPress={(href) => console.log('link:', href)}
        />
      </ScrollView>
    </SafeAreaView>
  )
}

Next: Styling · Custom renderers · API reference.