Stack

import { Stack } from 'reactnatively';

1import { Stack, TextInput, Button, Heading, Avatar } from 'reactnatively';23export function EditProfileForm() {4  return (5    <Stack direction="vertical" gap={20} style={{ padding: 24 }}>6      <Stack direction="horizontal" align="center" gap={16}>7        <Avatar src={{ uri: user.avatar }} size="xl" bordered />8        <Stack direction="vertical" gap={4}>9          <Heading level="h4">{user.name}</Heading>10          <Button variant="ghost" size="xs">Change photo</Button>11        </Stack>12      </Stack>1314      <TextInput label="Display Name" defaultValue={user.name} />15      <TextInput label="Username" defaultValue={user.username} />16      <TextInput label="Bio" defaultValue={user.bio} />1718      <Stack direction="horizontal" gap={12}>19        <Button variant="outline" flex={1} onPress={handleCancel}>Cancel</Button>20        <Button variant="solid" color="primary" flex={1} onPress={handleSave}>Save</Button>21      </Stack>22    </Stack>23  );24}

1import { Stack, Chip, Heading } from 'reactnatively';23const interests = ['Design', 'React Native', 'TypeScript', 'iOS', 'Android', 'Figma', 'Web3', 'AI'];45export function TagCloud() {6  return (7    <Stack direction="vertical" gap={12} style={{ padding: 20 }}>8      <Heading level="h4">Interests</Heading>9      <Stack direction="horizontal" wrap gap={8}>10        {interests.map((tag) => (11          <Chip key={tag} label={tag} variant="glass" size="sm" />12        ))}13      </Stack>14    </Stack>15  );16}

1import { TouchableOpacity } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { Stack, Text, LiquidCard, LiquidCardBody } from 'reactnatively';45const items = [6  { icon: 'person-outline', label: 'Account' },7  { icon: 'shield-outline', label: 'Privacy' },8  { icon: 'notifications-outline', label: 'Notifications' },9  { icon: 'help-circle-outline', label: 'Help & Support' },10];1112export function SettingsMenu() {13  return (14    <LiquidCard elevation={1} borderRadius={16} style={{ margin: 16 }}>15      <LiquidCardBody>16        <Stack direction="vertical" divider>17          {items.map((item) => (18            <TouchableOpacity key={item.label}>19              <Stack direction="horizontal" align="center" justify="space-between" gap={12} style={{ paddingVertical: 14 }}>20                <Stack direction="horizontal" align="center" gap={12}>21                  <Ionicons name={item.icon as any} size={20} color="rgba(255,255,255,0.6)" />22                  <Text variant="md">{item.label}</Text>23                </Stack>24                <Ionicons name="chevron-forward" size={16} color="rgba(255,255,255,0.3)" />25              </Stack>26            </TouchableOpacity>27          ))}28        </Stack>29      </LiquidCardBody>30    </LiquidCard>31  );32}