Use native heading elements

package.json

@@ -26,6 +26,7 @@
     "@atproto/api": "0.3.8",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
+    "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^18.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",

src/view/com/util/Html.tsx

@@ -1,9 +1,16 @@
 import * as React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
 import {Text} from './text/Text'
 import {TextLink} from './Link'
 import {isDesktopWeb} from 'platform/detection'
+import {
+  H1 as ExpoH1,
+  H2 as ExpoH2,
+  H3 as ExpoH3,
+  H4 as ExpoH4,
+} from '@expo/html-elements'
 
 /**
  * These utilities are used to define long documents in an html-like
@@ -21,38 +28,26 @@ interface IsChildProps {
 
 export function H1({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
+  const typography = useTheme().typography['title-xl']
-    <Text type="title-xl" style={[pal.text, styles.h1]}>
+  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
-      {children}
-    </Text>
-  )
 }
 
 export function H2({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
+  const typography = useTheme().typography['title-lg']
-    <Text type="title-lg" style={[pal.text, styles.h2]}>
+  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
-      {children}
-    </Text>
-  )
 }
 
 export function H3({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
+  const typography = useTheme().typography.title
-    <Text type="title" style={[pal.text, styles.h3]}>
+  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
-      {children}
-    </Text>
-  )
 }
 
 export function H4({children}: React.PropsWithChildren<{}>) {
   const pal = usePalette('default')
-  return (
+  const typography = useTheme().typography['title-sm']
-    <Text type="title-sm" style={[pal.text, styles.h4]}>
+  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
-      {children}
-    </Text>
-  )
 }
 
 export function P({children}: React.PropsWithChildren<{}>) {
@@ -149,9 +144,11 @@ const styles = StyleSheet.create({
     letterSpacing: 0.8,
   },
   h3: {
+    marginTop: 0,
     marginBottom: 10,
   },
   h4: {
+    marginTop: 0,
     marginBottom: 10,
     fontWeight: 'bold',
   },

yarn.lock

@@ -1927,6 +1927,11 @@
     tmp "^0.0.33"
     tslib "^2.4.0"
 
+"@expo/html-elements@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@expo/html-elements/-/html-elements-0.4.2.tgz#4e9f6b9250af8d0befe3242fd42704cca2421e0e"
+  integrity sha512-lNioCgdtOrCMMqzHY+PCTdyuWBTU4yMBlOzPSkS4YFIWt9bq0zexM2ZJkpybTXmowNdE3zHO93xxAmiA2yDi2w==
+
 "@expo/image-utils@0.3.22":
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.3.22.tgz#3a45fb2e268d20fcc761c87bca3aca7fd8e24260"