tf-checkout-react-native 2.0.0-beta.17 → 2.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.18",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
@@ -103,7 +103,9 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-mmkv": "^3.3.1",
+    "react-native-render-html": "6.3.4",
     "react-native-webview": "13.15.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "^19.0.4",
     "tf-checkout-shared": "workspace:*",
     "tf-seat-map-view": "9.4.7-beta.33",
@@ -113,6 +115,21 @@
   },
   "jest": {
     "preset": "react-native",
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": [
+        "babel-jest",
+        {
+          "babelrc": false,
+          "configFile": false,
+          "presets": [
+            "module:@react-native/babel-preset"
+          ]
+        }
+      ]
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?|\\.pnpm)/)"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/dist/"
@@ -160,6 +177,7 @@
     "react": ">=19.1",
     "react-native": ">=0.81",
     "react-native-mmkv": "^3.0.0",
+    "react-native-render-html": ">=6.3.4 <7",
     "react-native-webview": ">=13.15.0"
   },
   "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too \u2014 axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",

package/src/sections/Accommodation.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { hooks, htmlToPlainText, accommodationBookingDeadline } from 'tf-checkout-shared'
+import { hooks, accommodationBookingDeadline } from 'tf-checkout-shared'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import { Button, Card, ErrorText, Loader, MutedText, SectionHeader } from '../ui/primitives'
 
 /** Native controls over the shared stay draft, quote and reservation lifecycle. */
@@ -26,7 +27,7 @@ export const Accommodation = ({ eventId }: { eventId: string }) => {
         return (
           <View key={id} style={styles.room}>
             <Text style={[text, styles.title]}>{room.property_name} · {room.name}</Text>
-            {!!room.description && <MutedText>{htmlToPlainText(room.description)}</MutedText>}
+            {!!room.description && <RichText html={room.description} />}
             {accommodationBookingDeadline(room) && <MutedText>{accommodationBookingDeadline(room)}</MutedText>}
             <MutedText>{room.sold_out ? 'Sold out' : `${room.currency} ${room.min_price.toFixed(2)} per night${room.max_price > room.min_price ? ' and up' : ''}`}</MutedText>
             <Field label="Rooms">

package/src/sections/AddOns.tsx

@@ -15,7 +15,6 @@ import {
   addOnMaxQuantity,
   errorMessage,
   hooks,
-  htmlToPlainText,
   type EventAddon,
 } from 'tf-checkout-shared'
 
@@ -26,6 +25,7 @@ import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 // `CustomFieldGroupFields` API: { group, values, onChange(name, value) }.
 import { CustomFieldGroupFields } from '../ui/CustomFields'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (currency: string, n: number): string =>
@@ -135,7 +135,6 @@ export const AddOns: FC<AddOnsProps> = ({
             {g.items.map((a) => {
               const n = qty[a.id] ?? 0
               const group = fieldGroups[a.id]
-              const desc = a.description ? htmlToPlainText(a.description) : ''
               return (
                 <View key={a.id} style={s.item}>
                   <View style={s.row}>
@@ -150,7 +149,9 @@ export const AddOns: FC<AddOnsProps> = ({
                           <Text style={s.priceNote}> incl. fees</Text>
                         ) : null}
                       </Text>
-                      {desc ? <Text style={s.desc}>{desc}</Text> : null}
+                      {a.description ? (
+                        <RichText html={a.description} textStyle={s.desc} />
+                      ) : null}
                     </View>
                     <View style={s.quantity}>
                       {soldOut(a) ? (

package/src/sections/Bundles.tsx

@@ -17,7 +17,6 @@ import { StyleSheet, Text, View } from 'react-native'
 import {
   bundleAvailabilityCopy,
   bundleContentsLine,
-  htmlToPlainText,
   bundleQuantityRange,
   createTranslator,
   hooks,
@@ -33,6 +32,7 @@ import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { Button, Card, ErrorText, Loader } from '../ui/primitives'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { RichText } from '../ui/RichText'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (currency: string, amount: number) => `${currency} ${amount.toFixed(2)}`
@@ -361,7 +361,6 @@ export const Bundles: FC<BundlesProps> = ({
         const range = bundleQuantityRange(bundle)
         const stock = bundleAvailabilityCopy(bundle)
         const contents = bundleContentsLine(bundle)
-        const desc = htmlToPlainText(bundle.description ?? '')
         return (
           <View key={bundle.id} style={[s.item, { borderTopColor: theme.border }]}>
             <View style={s.info}>
@@ -377,7 +376,9 @@ export const Bundles: FC<BundlesProps> = ({
                   })}
                 </Text>
               )}
-              {desc ? <Text style={s.muted}>{desc}</Text> : null}
+              {bundle.description ? (
+                <RichText html={bundle.description} textStyle={s.muted} />
+              ) : null}
               {stock && stock.key !== 'bundles.soldOut' ? (
                 <Text style={[s.muted, s.stock]}>{t(stock.key, stock.values)}</Text>
               ) : null}

package/src/sections/Payment.tsx

@@ -15,7 +15,7 @@ import { Accommodation } from './Accommodation'
  *     payment plans. Existing explicit wallet rows keep their own policy gates.
  *   - CheckoutProvider owns provider-page windows for Xendit, redirect methods,
  *     Razorpay and PayPal; imperative hosts provide that port themselves.
- *   - Conditions render as plain text (HTML stripped) — no DOM to inject markup.
+ *   - Conditions use the shared native rich renderer, preserving links/formatting.
  */
 import React, { useEffect, useMemo, useState, type FC } from 'react'
 import { Platform, View } from 'react-native'
@@ -30,7 +30,6 @@ import {
   cartTicketCount,
   getConfig,
   errorMessage,
-  htmlToPlainText,
   missingCheckoutDetails,
   paymentAcknowledgementsMet,
   paymentPlanTerms,
@@ -52,8 +51,13 @@ import {
 import { CardInput, claimCardField } from '../CardInput'
 import { nativePaymentSheetAvailable } from '../paymentSheet'
 import { rnConfirmer } from '../instance'
-import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import {
+  useCheckoutContext,
+  useCheckoutValidation,
+  useTheme,
+} from '../ui/CheckoutProvider'
 import { Checkbox } from '../ui/Field'
+import { RichText } from '../ui/RichText'
 import { PaymentMethods, type PaymentMethodOption } from '../ui/PaymentMethods'
 import {
   BodyText,
@@ -85,10 +89,6 @@ const REDIRECT_LABELS: Record<string, string> = {
 const redirectLabel = (t: string) =>
   REDIRECT_LABELS[t] ?? t.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
 
-/** Condition copy as one line of plain text: native has no DOM to render
- *  markup into, and the copy is a checkbox label. */
-const conditionText = (html: string) => htmlToPlainText(html).replace(/\s*\n\s*/g, ' ')
-
 export interface PaymentProps {
   onComplete?: (order: PlaceOrderResult) => void
   /** Optional event context (parity with web; native `OrderSummary` reads the
@@ -150,6 +150,7 @@ export const Payment: FC<PaymentProps> = ({
 }) => {
   const t = translate ?? createTranslator({ locale, messages })
   const checkout = useCheckoutContext()
+  const theme = useTheme()
   // This checkout's own card field: another checkout on the page has its own.
   const cardOwner = hooks.useTicketCardOwner()
   // A bundle purchase holds the payment SDK: Pay would do nothing now.
@@ -506,7 +507,17 @@ export const Payment: FC<PaymentProps> = ({
                   checked={Boolean(checkout.acceptedConditions?.[c.id])}
                   invalid={invalid}
                   onChange={(next) => checkout.acceptCondition(c.id, next)}
-                  label={`${conditionText(c.content || c.name)}${c.isRequired ? ' *' : ''}`}
+                  label={
+                    <View style={{ flex: 1, minWidth: 0, flexDirection: 'row', gap: 4 }}>
+                      <View style={{ flex: 1, minWidth: 0 }}>
+                        <RichText
+                          html={c.content || c.name}
+                          textStyle={{ color: theme.text }}
+                        />
+                      </View>
+                      {c.isRequired ? <BodyText>*</BodyText> : null}
+                    </View>
+                  }
                 />
               </FrozenFields>
               {invalid ? (

package/src/sections/Tickets.tsx

@@ -25,11 +25,10 @@ import {
   changeTicketQuantity,
   errorMessage,
   hooks,
-  htmlToPlainText,
   ticketQuantityRange,
+  waitingListProfilePrefill,
   type TicketSelection,
   type TicketType,
-  type WaitingListEntry,
   createTranslator,
 } from 'tf-checkout-shared'
 
@@ -46,73 +45,13 @@ import { FrozenFields } from '../ui/Frozen'
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { Field, Input } from '../ui/Field'
 import { QuantitySelect } from '../ui/QuantitySelect'
+import { WaitingListForm } from '../ui/WaitingListForm'
+import { RichText } from '../ui/RichText'
 import { Select } from '../ui/Select'
 import type { ResolvedTheme } from '../ui/theme'
 
 const money = (sym: string, n: number): string => `${sym} ${Number(n).toFixed(2)}`
 
-/** Inline waiting-list sign-up for a sold-out type. */
-const WaitingListForm: FC<{
-  ticket: TicketType
-  onJoin: (entry: WaitingListEntry) => Promise<void>
-}> = ({ ticket, onJoin }) => {
-  const [form, setForm] = useState({ firstName: '', lastName: '', email: '' })
-  const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>('idle')
-  const [error, setError] = useState('')
-  const ok = Boolean(form.firstName.trim() && form.lastName.trim() && form.email.trim())
-
-  if (state === 'done')
-    return (
-      <MutedText>You’re on the waiting list — we’ll email you if a spot opens.</MutedText>
-    )
-
-  return (
-    <View style={staticStyles.wlForm}>
-      <Field>
-        <Input
-          placeholder="First name"
-          value={form.firstName}
-          onChangeText={(t) => setForm((f) => ({ ...f, firstName: t }))}
-        />
-      </Field>
-      <Field>
-        <Input
-          placeholder="Last name"
-          value={form.lastName}
-          onChangeText={(t) => setForm((f) => ({ ...f, lastName: t }))}
-        />
-      </Field>
-      <Field>
-        <Input
-          placeholder="Email"
-          value={form.email}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          onChangeText={(t) => setForm((f) => ({ ...f, email: t }))}
-        />
-      </Field>
-      <Button
-        variant="ghost"
-        loading={state === 'busy'}
-        disabled={!ok || state === 'busy'}
-        onPress={() => {
-          setState('busy')
-          setError('')
-          onJoin({ ...form, ticketTypeId: ticket.id })
-            .then(() => setState('done'))
-            .catch((e) => {
-              setState('error')
-              setError(errorMessage(e))
-            })
-        }}
-      >
-        Join the waiting list
-      </Button>
-      {error ? <ErrorText>{error}</ErrorText> : null}
-    </View>
-  )
-}
-
 /** Host-owned visuals over the shared catalog and reservation flow. */
 export interface TicketRowRenderProps {
   ticket: TicketType
@@ -178,6 +117,13 @@ export const Tickets: FC<TicketsProps> = ({
   const theme = useTheme()
   const s = useTicketStyles(theme)
   const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  const waitingBuyer = hooks.useAuthSession()
+  const cachedProfile = hooks.useProfile({ enabled: false }).data
+  const waitingPrefill = waitingListProfilePrefill(
+    cachedProfile,
+    waitingBuyer.buyerId,
+    waitingBuyer.sessionScope
+  )
   // A bundle order is starting: wait, so the two flows never start at once.
   // The checkout start lock is held by a bundle start or pay (shown as a
   // wait), or by this checkout's own priming (shown as the busy button).
@@ -185,7 +131,6 @@ export const Tickets: FC<TicketsProps> = ({
   const bundleWait = hooks.useTicketGatewayWait(checkout.store)
   const bundleStarting = bundleWait !== null
   const promoMeta = ticketsQuery.data?.promo
-  const showWaitingList = ticketsQuery.data?.showWaitingList ?? false
 
   const [qty, setQty] = useState<Record<string, number>>({})
   const [slotDate, setSlotDate] = useState('')
@@ -201,6 +146,11 @@ export const Tickets: FC<TicketsProps> = ({
     if (isTimeSlot && !slotDate && dates.length) setSlotDate(dates[0])
   }, [isTimeSlot, slotDate, dates])
   const slotQuery = hooks.useTimeSlotTickets(eventId, isTimeSlot ? slotDate : undefined)
+  const refetchCatalog = () =>
+    Promise.all([
+      ticketsQuery.refetch(),
+      ...(isTimeSlot && slotDate ? [slotQuery.refetch()] : []),
+    ])
 
   const tickets = useMemo(
     () => (isTimeSlot ? (slotQuery.data ?? []) : (ticketsQuery.data?.tickets ?? [])),
@@ -218,7 +168,6 @@ export const Tickets: FC<TicketsProps> = ({
     setPromoOpen(false)
     setError('')
   })
-  const [wlOpen, setWlOpen] = useState<Record<string, boolean>>({})
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
   const attributionEvent = useRef<string | null>(null)
 
@@ -243,7 +192,7 @@ export const Tickets: FC<TicketsProps> = ({
         .applyPromoCode(eventId, promo)
         .catch(() => undefined)
         .finally(() => {
-          ticketsQuery.refetch().finally(() => setCodeState('idle'))
+          refetchCatalog().finally(() => setCodeState('idle'))
         })
     }
     // Checkout actions and query functions are stable; this effect is scoped to
@@ -264,7 +213,7 @@ export const Tickets: FC<TicketsProps> = ({
       .then((res) => {
         if (res.requiresCatalogRefresh) {
           setQty({})
-          ticketsQuery.refetch()
+          refetchCatalog()
         }
       })
       .catch(() => undefined)
@@ -340,7 +289,7 @@ export const Tickets: FC<TicketsProps> = ({
       .applyPromoCode(eventId, code.trim())
       .catch(() => undefined)
       .finally(() => {
-        ticketsQuery.refetch().finally(() => setCodeState('idle'))
+        refetchCatalog().finally(() => setCodeState('idle'))
       })
   }
 
@@ -354,8 +303,6 @@ export const Tickets: FC<TicketsProps> = ({
     const unavailable = t.soldOut || t.salesEnded || notStarted
     const original = originals.current[t.id]
     const discounted = original != null && original > t.price
-    const canWaitlist =
-      t.soldOut && (t.waitingListEnabled || showWaitingList) && !t.salesEnded
     const isFree = Number(t.price) === 0
     const sym = t.priceSymbol || t.currency
     const range = ticketQuantityRange(t)
@@ -457,26 +404,10 @@ export const Tickets: FC<TicketsProps> = ({
                 )}
               </View>
               {t.descriptionRich && visibleDescription === t.id ? (
-                <Text style={s.description}>{htmlToPlainText(t.descriptionRich)}</Text>
+                <RichText html={t.descriptionRich} textStyle={s.description} />
               ) : null}
             </>
           )}
-          {canWaitlist ? (
-            wlOpen[t.id] ? (
-              <WaitingListForm
-                ticket={t}
-                onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
-              />
-            ) : (
-              <Pressable
-                accessibilityRole="button"
-                style={s.textAction}
-                onPress={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
-              >
-                <Text style={s.wlToggle}>Join the waiting list</Text>
-              </Pressable>
-            )
-          ) : null}
         </View>
       </Fragment>
     )
@@ -639,6 +570,13 @@ export const Tickets: FC<TicketsProps> = ({
           </Button>
         ) : null}
 
+        <WaitingListForm
+          eventId={eventId}
+          definition={ticketsQuery.data?.waitingList}
+          prefill={waitingPrefill}
+          onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
+        />
+
         {error || checkout.error ? (
           <ErrorText>{error || checkout.error}</ErrorText>
         ) : null}
@@ -647,11 +585,6 @@ export const Tickets: FC<TicketsProps> = ({
   )
 }
 
-/** Theme-independent layout bits (used by the WaitingListForm subcomponent). */
-const staticStyles = StyleSheet.create({
-  wlForm: { gap: 8 },
-})
-
 const useTicketStyles = (theme: ResolvedTheme) =>
   useMemo(
     () =>
@@ -775,12 +708,6 @@ const useTicketStyles = (theme: ResolvedTheme) =>
           lineHeight: theme.fontSize * 1.5,
           fontFamily: theme.fontFamily,
         },
-        wlToggle: {
-          color: theme.accent,
-          fontSize: theme.fontSize - 1,
-          fontWeight: '600',
-          fontFamily: theme.fontFamily,
-        },
         promo: { gap: 8 },
         promoToggle: {
           color: theme.accent,

package/src/sections/WaiverSigning.tsx

@@ -20,7 +20,6 @@ import {
   emptyWaiverDraft,
   formatDateDigits,
   hooks,
-  htmlToPlainText,
   holderBackfilledFrom,
   signatureMatchesHolder,
   waiverTicketFormKey,
@@ -38,6 +37,7 @@ import {
 
 import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
 import { SignaturePad } from '../ui/SignaturePad'
+import { RichText } from '../ui/RichText'
 import { Checkbox, Field, Input } from '../ui/Field'
 import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
 import type { ResolvedTheme } from '../ui/theme'
@@ -116,7 +116,7 @@ export const WaiverSigning: FC<WaiverSigningProps> = ({
         )}
       </Text>
       <ScrollView style={[s.textBox, { borderColor: theme.border }]} nestedScrollEnabled>
-        <Text style={s.body}>{htmlToPlainText(waiver.bodyHtml)}</Text>
+        <RichText html={waiver.bodyHtml} textStyle={s.body} selectable />
       </ScrollView>
 
       {tickets.map((ticket) => {

package/src/ui/RichText.tsx

@@ -0,0 +1,187 @@
+import React, { useMemo, useState } from 'react'
+import { Alert, Linking, StyleSheet, Text, View } from 'react-native'
+import RenderHTML, {
+  defaultSystemFonts,
+  HTMLContentModel,
+  HTMLElementModel,
+  IMGElement,
+  useIMGElementProps,
+  useSharedProps,
+  type CustomBlockRenderer,
+  type MixedStyleDeclaration,
+  type MixedStyleRecord,
+} from 'react-native-render-html'
+
+import { useTheme } from './CheckoutProvider'
+
+const ignoredDomTags = [
+  'script',
+  'style',
+  'template',
+  'noscript',
+  'iframe',
+  'object',
+  'embed',
+  'form',
+  'head',
+]
+const allowedStyles: NonNullable<
+  React.ComponentProps<typeof RenderHTML>['allowedStyles']
+> = ['fontWeight', 'fontStyle', 'textDecorationLine', 'textAlign', 'display']
+const ignoreDomNode: NonNullable<
+  React.ComponentProps<typeof RenderHTML>['ignoreDomNode']
+> = (node) => {
+  if (!('attribs' in node) || !node.attribs || typeof node.attribs !== 'object')
+    return false
+  return (
+    'hidden' in node.attribs ||
+    ('style' in node.attribs &&
+      typeof node.attribs.style === 'string' &&
+      /(?:^|;)\s*(?:display\s*:\s*none|visibility\s*:\s*(?:hidden|collapse))\s*(?:!important\s*)?(?:;|$)/i.test(
+        node.attribs.style
+      ))
+  )
+}
+// Default models omit tables. Block models retain every caption/cell without
+// a WebView or a second parser; complex spans remain readable, not pixel-identical.
+const customHTMLElementModels = Object.fromEntries(
+  ['table', 'caption', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th'].map((tagName) => [
+    tagName,
+    HTMLElementModel.fromCustomModel({ tagName, contentModel: HTMLContentModel.block }),
+  ])
+)
+
+export interface RichTextProps {
+  html: string
+  textStyle?: MixedStyleDeclaration
+  tagsStyles?: MixedStyleRecord
+  onLinkPress?: (href: string) => void
+  selectable?: boolean
+}
+
+const SafeImage: CustomBlockRenderer = (props) => {
+  const image = useIMGElementProps(props)
+  const { defaultTextProps } = useSharedProps()
+  if (!/^https?:\/\//i.test(image.source.uri ?? ''))
+    return image.alt ? (
+      <Text {...defaultTextProps} style={props.tnode.styles.nativeTextFlow}>
+        {image.alt}
+      </Text>
+    ) : null
+  return <IMGElement {...image} />
+}
+const renderers = { img: SafeImage }
+
+/** API HTML is parsed once, preserving escaped literal tags as visible text. */
+export const RichText = ({
+  html,
+  textStyle,
+  tagsStyles: tagOverrides,
+  onLinkPress,
+  selectable = false,
+}: RichTextProps) => {
+  const theme = useTheme()
+  const [width, setWidth] = useState(0)
+  const source = useMemo(() => ({ html }), [html])
+  const baseStyle = useMemo(
+    () => ({
+      color: theme.muted,
+      fontSize: theme.fontSize - 1,
+      lineHeight: theme.fontSize * 1.5,
+      fontFamily: theme.fontFamily,
+      ...textStyle,
+    }),
+    [theme.muted, theme.fontSize, theme.fontFamily, textStyle]
+  )
+  const systemFonts = useMemo(
+    () =>
+      [
+        ...new Set([...defaultSystemFonts, theme.fontFamily, textStyle?.fontFamily]),
+      ].filter((font): font is string => typeof font === 'string'),
+    [theme.fontFamily, textStyle?.fontFamily]
+  )
+  const tagsStyles = useMemo(() => {
+    const defaults: Record<string, MixedStyleDeclaration> = {
+      p: { marginTop: 0, marginBottom: 8 },
+      ul: { marginTop: 0, marginBottom: 8, paddingLeft: 22 },
+      ol: { marginTop: 0, marginBottom: 8, paddingLeft: 22 },
+      a: { color: theme.accent, textDecorationLine: 'underline' },
+      table: { marginBottom: 8 },
+      caption: { fontWeight: '600', marginBottom: 4 },
+      tr: { flexDirection: 'row', flexWrap: 'wrap' },
+      td: { flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 48, padding: 4 },
+      th: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 48,
+        padding: 4,
+        fontWeight: '600',
+      },
+    }
+    // Match the standard heading sizes to the body font with enough line height;
+    // inheriting the body's fixed height clips larger headings.
+    const headingBase =
+      typeof baseStyle.fontSize === 'number' ? baseStyle.fontSize : theme.fontSize - 1
+    for (const [heading, scale] of Object.entries({
+      h1: 2,
+      h2: 1.5,
+      h3: 1.17,
+      h4: 1,
+      h5: 0.83,
+      h6: 0.67,
+    })) {
+      const overrideSize = tagOverrides?.[heading]?.fontSize
+      const size = typeof overrideSize === 'number' ? overrideSize : headingBase * scale
+      defaults[heading] = { fontSize: size, lineHeight: size * 1.35 }
+    }
+    for (const [tag, style] of Object.entries(tagOverrides ?? {}))
+      defaults[tag] = { ...defaults[tag], ...style }
+    return defaults
+  }, [theme.accent, theme.fontSize, baseStyle.fontSize, tagOverrides])
+  const renderersProps = useMemo<
+    NonNullable<React.ComponentProps<typeof RenderHTML>['renderersProps']>
+  >(
+    () => ({
+      a: {
+        onPress: (event, href) => {
+          // Opening a nested terms link must never accept its parent checkbox.
+          event.stopPropagation?.()
+          if (!/^https?:\/\//i.test(href)) return
+          if (onLinkPress) onLinkPress(href)
+          else
+            void Linking.openURL(href).catch(() =>
+              Alert.alert('Couldn’t open link', 'Please try again.')
+            )
+        },
+      },
+    }),
+    [onLinkPress]
+  )
+  const defaultTextProps = useMemo(() => ({ selectable }), [selectable])
+  return (
+    <View
+      style={styles.container}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+    >
+      {width > 0 ? (
+        <RenderHTML
+          source={source}
+          contentWidth={width}
+          baseStyle={baseStyle}
+          systemFonts={systemFonts}
+          tagsStyles={tagsStyles}
+          allowedStyles={allowedStyles}
+          ignoredDomTags={ignoredDomTags}
+          ignoreDomNode={ignoreDomNode}
+          renderersProps={renderersProps}
+          customHTMLElementModels={customHTMLElementModels}
+          renderers={renderers}
+          defaultTextProps={defaultTextProps}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({ container: { alignSelf: 'stretch', minWidth: 0 } })