Heading

import { Heading } from 'reactnatively';

1import { ScrollView, StyleSheet } from 'react-native';2import { Heading, Text } from 'reactnatively';34export function TypographyScreen() {5  return (6    <ScrollView contentContainerStyle={styles.container}>7      <Heading level="h1">Heading 1 — Display</Heading>8      <Heading level="h2">Heading 2 — Title</Heading>9      <Heading level="h3">Heading 3 — Section</Heading>10      <Heading level="h4">Heading 4 — Card title</Heading>11      <Heading level="h5" weight="semibold">Heading 5 — Label</Heading>12      <Heading level="h6" weight="medium" color="rgba(255,255,255,0.6)">13        Heading 6 — Caption title14      </Heading>15    </ScrollView>16  );17}1819const styles = StyleSheet.create({20  container: { padding: 24, gap: 16 },21});

1import { ScrollView, View, StyleSheet } from 'react-native';2import { Heading, Text, Badge } from 'reactnatively';34export function ArticleScreen({ article }) {5  return (6    <ScrollView contentContainerStyle={styles.container}>7      <Badge label={article.category} status="primary" variant="subtle" size="sm" style={{ alignSelf: 'flex-start' }} />8      <Heading level="h1" style={styles.title}>{article.title}</Heading>9      <Heading level="h5" weight="medium" color="rgba(255,255,255,0.5)" style={styles.subtitle}>10        {article.subtitle}11      </Heading>12      <View style={styles.meta}>13        <Text variant="xs" color="rgba(255,255,255,0.4)">{article.author}</Text>14        <Text variant="xs" color="rgba(255,255,255,0.3)">·</Text>15        <Text variant="xs" color="rgba(255,255,255,0.4)">{article.readTime} min read</Text>16      </View>17      <Text variant="md" color="rgba(255,255,255,0.7)" style={styles.body}>18        {article.body}19      </Text>20    </ScrollView>21  );22}2324const styles = StyleSheet.create({25  container: { padding: 24 },26  title: { marginTop: 12, marginBottom: 8 },27  subtitle: { marginBottom: 12 },28  meta: { flexDirection: 'row', gap: 6, marginBottom: 24 },29  body: { lineHeight: 26 },30});