Text

import { Text } from 'reactnatively';

1import { View, StyleSheet } from 'react-native';2import { Text } from 'reactnatively';34export function TextShowcase() {5  return (6    <View style={styles.container}>7      <Text variant="2xl" weight="bold">2XL — Display text</Text>8      <Text variant="xl" weight="semibold">XL — Large body</Text>9      <Text variant="lg">LG — Default reading size</Text>10      <Text variant="md" color="rgba(255,255,255,0.7)">MD — Secondary body</Text>11      <Text variant="sm" color="rgba(255,255,255,0.5)">SM — Caption / helper text</Text>12      <Text variant="xs" color="rgba(255,255,255,0.4)" weight="medium">XS — Fine print</Text>13    </View>14  );15}1617const styles = StyleSheet.create({18  container: { padding: 24, gap: 12 },19});

1import { View, StyleSheet } from 'react-native';2import { Text, Heading, Badge, LiquidCard, LiquidCardBody } from 'reactnatively';34export function ProductDetail({ product }) {5  return (6    <LiquidCard elevation={2} borderRadius={20}>7      <LiquidCardBody>8        <View style={styles.priceRow}>9          <Text variant="2xl" weight="bold">${product.price}</Text>10          <Text variant="md" color="rgba(255,255,255,0.4)" strikethrough>11            ${product.originalPrice}12          </Text>13          <Badge label="-20%" status="success" variant="subtle" size="sm" />14        </View>15        <Heading level="h3" style={{ marginBottom: 8 }}>{product.name}</Heading>16        <Text17          variant="md"18          color="rgba(255,255,255,0.6)"19          numberOfLines={3}20          style={{ lineHeight: 24 }}21        >22          {product.description}23        </Text>24        <Text variant="xs" color="rgba(255,255,255,0.35)" italic style={{ marginTop: 12 }}>25          Free shipping on orders over $5026        </Text>27      </LiquidCardBody>28    </LiquidCard>29  );30}3132const styles = StyleSheet.create({33  priceRow: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 12 },34});