import { View, Text, StyleSheet, useColorScheme } from 'react-native';

function Box({ label, color }: { label: string; color: string }) {
  return (
    <View style={[styles.box, { backgroundColor: color }]}>
      <Text style={styles.boxText}>{label}</Text>
    </View>
  );
}

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.title, { color: text }]}>column (default)</Text>
      <View style={[styles.panel, isDark && styles.panelDark]}>
        <Box label="A" color="#2563EB" />
        <Box label="B" color="#16A34A" />
        <Box label="C" color="#DC2626" />
      </View>

      <Text style={[styles.title, { color: text, marginTop: 20 }]}>row</Text>
      <View style={[styles.panel, styles.row, isDark && styles.panelDark]}>
        <Box label="A" color="#2563EB" />
        <Box label="B" color="#16A34A" />
        <Box label="C" color="#DC2626" />
      </View>

      <Text style={[styles.hint, { color: muted }]}>
        У RN без flexDirection вкладені елементи йдуть колонкою — як у першій панелі.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 20, gap: 8 },
  title: { fontSize: 15, fontWeight: '700' },
  panel: {
    backgroundColor: 'rgba(37,99,235,0.08)',
    borderRadius: 12,
    padding: 12,
    gap: 8,
  },
  panelDark: { backgroundColor: '#1c1c1e' },
  row: { flexDirection: 'row', alignItems: 'center' },
  box: {
    width: 52,
    height: 52,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxText: { color: '#fff', fontWeight: '700', fontSize: 16 },
  hint: { fontSize: 13, lineHeight: 18, marginTop: 8 },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet, useColorScheme } from 'react-native';

type JC =
  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

const OPTIONS: JC[] = [
  'flex-start',
  'flex-end',
  'center',
  'space-between',
  'space-around',
  'space-evenly',
];

function Chip({
  label,
  active,
  onPress,
}: {
  label: string;
  active: boolean;
  onPress: () => void;
}) {
  return (
    <Pressable onPress={onPress} style={[styles.chip, active && styles.chipOn]}>
      <Text style={[styles.chipText, active && styles.chipTextOn]}>{label}</Text>
    </Pressable>
  );
}

export default function App() {
  const [jc, setJc] = useState<JC>('flex-start');
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>justifyContent</Text>
      <View style={styles.chips}>
        {OPTIONS.map((o) => (
          <Chip key={o} label={o} active={jc === o} onPress={() => setJc(o)} />
        ))}
      </View>

      <View style={[styles.arena, { justifyContent: jc }, isDark && styles.arenaDark]}>
        <View style={[styles.item, { backgroundColor: '#2563EB' }]} />
        <View style={[styles.item, { backgroundColor: '#16A34A' }]} />
        <View style={[styles.item, { backgroundColor: '#DC2626' }]} />
      </View>

      <Text style={[styles.code, { color: muted }]}>{`justifyContent: '${jc}'`}</Text>
      <Text style={[styles.hint, { color: muted }]}>
        Арена — колонка (flexDirection default). Міняється лише розподіл по вертикалі.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 14, gap: 8 },
  h: { fontSize: 17, fontWeight: '700' },
  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
  chip: {
    paddingHorizontal: 8,
    paddingVertical: 5,
    borderRadius: 8,
    backgroundColor: '#e2e8f0',
  },
  chipOn: { backgroundColor: '#2563EB' },
  chipText: { fontSize: 11, fontWeight: '600', color: '#0f172a' },
  chipTextOn: { color: '#fff' },
  arena: {
    flex: 1,
    marginTop: 8,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#93c5fd',
    backgroundColor: '#fff',
    padding: 10,
    minHeight: 220,
  },
  arenaDark: { backgroundColor: '#1c1c1e', borderColor: '#3b82f6' },
  item: { height: 40, borderRadius: 8 },
  code: { fontSize: 13, fontFamily: 'monospace' },
  hint: { fontSize: 12, lineHeight: 17 },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet, useColorScheme } from 'react-native';

type AI = 'flex-start' | 'flex-end' | 'center' | 'stretch';
const OPTIONS: AI[] = ['flex-start', 'center', 'flex-end', 'stretch'];

function Chip({
  label,
  active,
  onPress,
}: {
  label: string;
  active: boolean;
  onPress: () => void;
}) {
  return (
    <Pressable onPress={onPress} style={[styles.chip, active && styles.chipOn]}>
      <Text style={[styles.chipText, active && styles.chipTextOn]}>{label}</Text>
    </Pressable>
  );
}

export default function App() {
  const [ai, setAi] = useState<AI>('center');
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>row · alignItems</Text>
      <View style={styles.chips}>
        {OPTIONS.map((o) => (
          <Chip key={o} label={o} active={ai === o} onPress={() => setAi(o)} />
        ))}
      </View>

      <View style={[styles.arena, { alignItems: ai }, isDark && styles.arenaDark]}>
        <View style={[styles.box, { height: 40, backgroundColor: '#2563EB' }]} />
        <View style={[styles.box, { height: 70, backgroundColor: '#16A34A' }]} />
        <View style={[styles.box, { height: 50, backgroundColor: '#DC2626' }]} />
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`flexDirection: 'row'\nalignItems: '${ai}'`}
      </Text>
      <Text style={[styles.hint, { color: muted }]}>
        stretch розтягує вкладені елементи по висоті арени (якщо height не зафіксовано — тут height є, тож
        stretch майже як flex-start для цих коробок).
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 14, gap: 8 },
  h: { fontSize: 17, fontWeight: '700' },
  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
  chip: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 8,
    backgroundColor: '#e2e8f0',
  },
  chipOn: { backgroundColor: '#2563EB' },
  chipText: { fontSize: 12, fontWeight: '600', color: '#0f172a' },
  chipTextOn: { color: '#fff' },
  arena: {
    flexDirection: 'row',
    height: 160,
    marginTop: 8,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#86efac',
    backgroundColor: '#fff',
    padding: 10,
    gap: 8,
  },
  arenaDark: { backgroundColor: '#1c1c1e', borderColor: '#22c55e' },
  box: { width: 48, borderRadius: 8 },
  code: { fontSize: 13, fontFamily: 'monospace' },
  hint: { fontSize: 12, lineHeight: 17 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.title, { color: text }]}>Частки flex уздовж колонки</Text>
      <View style={styles.stack}>
        <View style={[styles.block, { flex: 1, backgroundColor: '#2563EB' }]}>
          <Text style={styles.label}>flex: 1</Text>
        </View>
        <View style={[styles.block, { flex: 2, backgroundColor: '#16A34A' }]}>
          <Text style={styles.label}>flex: 2</Text>
        </View>
        <View style={[styles.block, { flex: 3, backgroundColor: '#DC2626' }]}>
          <Text style={styles.label}>flex: 3</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 12 },
  title: { fontSize: 16, fontWeight: '700' },
  stack: { flex: 1, gap: 8 },
  block: {
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: { color: '#fff', fontWeight: '700', fontSize: 16 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>flexBasis (grow = 0)</Text>
      <Text style={[styles.sub, { color: muted }]}>
        Рядок ширший за суму basis — лишається порожнє місце справа. Блоки не
        «з’їдають» його, бо grow вимкнено.
      </Text>

      <View style={[styles.row, isDark && styles.rowDark]}>
        <View style={[styles.box, { flexBasis: 80, backgroundColor: '#2563EB' }]}>
          <Text style={styles.boxText}>80</Text>
        </View>
        <View style={[styles.box, { flexBasis: 160, backgroundColor: '#16A34A' }]}>
          <Text style={styles.boxText}>160</Text>
        </View>
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`// обидва: flexGrow: 0, flexShrink: 1\nflexBasis: 80  |  flexBasis: 160`}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 10 },
  h: { fontSize: 17, fontWeight: '700' },
  sub: { fontSize: 13, lineHeight: 18 },
  row: {
    flexDirection: 'row',
    height: 72,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#93c5fd',
    backgroundColor: '#fff',
    padding: 8,
    gap: 8,
    alignItems: 'stretch',
  },
  rowDark: { backgroundColor: '#1c1c1e', borderColor: '#3b82f6' },
  box: {
    flexGrow: 0,
    flexShrink: 1,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxText: { color: '#fff', fontWeight: '700', fontSize: 16 },
  code: { fontSize: 12, fontFamily: 'monospace', lineHeight: 18 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>flexGrow: 0 vs 1</Text>
      <Text style={[styles.sub, { color: muted }]}>
        Синій лишається ≈ basis 80. Зелений стартує з 100 і забирає весь залишок
        ширини рядка.
      </Text>

      <View style={[styles.row, isDark && styles.rowDark]}>
        <View
          style={[
            styles.box,
            {
              flexBasis: 80,
              flexGrow: 0,
              backgroundColor: '#2563EB',
            },
          ]}
        >
          <Text style={styles.boxText}>grow 0</Text>
        </View>
        <View
          style={[
            styles.box,
            {
              flexBasis: 100,
              flexGrow: 1,
              backgroundColor: '#16A34A',
            },
          ]}
        >
          <Text style={styles.boxText}>grow 1</Text>
        </View>
      </View>

      <Text style={[styles.hint, { color: muted }]}>
        Життєвий патерн: фіксована іконка зліва (grow 0) + текстовий блок посередині
        (grow 1 / flex: 1).
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 10 },
  h: { fontSize: 17, fontWeight: '700' },
  sub: { fontSize: 13, lineHeight: 18 },
  row: {
    flexDirection: 'row',
    height: 72,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#86efac',
    backgroundColor: '#fff',
    padding: 8,
    gap: 8,
  },
  rowDark: { backgroundColor: '#1c1c1e', borderColor: '#22c55e' },
  box: {
    flexShrink: 1,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxText: { color: '#fff', fontWeight: '700', fontSize: 14 },
  hint: { fontSize: 13, lineHeight: 18 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>flexShrink: 1 vs 0</Text>
      <Text style={[styles.sub, { color: muted }]}>
        Basis 200 + 200 не влазять у вузький рядок. Синій (shrink 1) стискається;
        червоний (shrink 0) тримається міцніше.
      </Text>

      <View style={[styles.row, isDark && styles.rowDark]}>
        <View
          style={[
            styles.box,
            {
              flexBasis: 200,
              flexGrow: 0,
              flexShrink: 1,
              backgroundColor: '#2563EB',
            },
          ]}
        >
          <Text style={styles.boxText} numberOfLines={2}>
            shrink 1{'\n'}basis 200
          </Text>
        </View>
        <View
          style={[
            styles.box,
            {
              flexBasis: 200,
              flexGrow: 0,
              flexShrink: 0,
              backgroundColor: '#DC2626',
            },
          ]}
        >
          <Text style={styles.boxText} numberOfLines={2}>
            shrink 0{'\n'}basis 200
          </Text>
        </View>
      </View>

      <Text style={[styles.hint, { color: muted }]}>
        На кнопках, цінах, шевронах часто shrink: 0. На довгій назві — shrink: 1 +
        numberOfLines, інакше «хвіст» вилізе за екран.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 10 },
  h: { fontSize: 17, fontWeight: '700' },
  sub: { fontSize: 13, lineHeight: 18 },
  row: {
    flexDirection: 'row',
    height: 88,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#fca5a5',
    backgroundColor: '#fff',
    padding: 8,
    gap: 8,
    // без overflow видно, як shrink 0 «бореться» за місце
  },
  rowDark: { backgroundColor: '#1c1c1e', borderColor: '#ef4444' },
  box: {
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 6,
  },
  boxText: {
    color: '#fff',
    fontWeight: '700',
    fontSize: 12,
    textAlign: 'center',
  },
  hint: { fontSize: 13, lineHeight: 18 },
});

import { useState } from 'react';
import { View, Text, Pressable, StyleSheet, useColorScheme } from 'react-native';

type Grow = 0 | 1 | 2;
type Shrink = 0 | 1;
type Basis = 40 | 80 | 120 | 200;

function Chip({
  label,
  active,
  onPress,
}: {
  label: string;
  active: boolean;
  onPress: () => void;
}) {
  return (
    <Pressable onPress={onPress} style={[styles.chip, active && styles.chipOn]}>
      <Text style={[styles.chipText, active && styles.chipTextOn]}>{label}</Text>
    </Pressable>
  );
}

export default function App() {
  const [grow, setGrow] = useState<Grow>(1);
  const [shrink, setShrink] = useState<Shrink>(1);
  const [basis, setBasis] = useState<Basis>(80);
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>Середній блок (зелений)</Text>

      <Text style={[styles.group, { color: muted }]}>flexBasis</Text>
      <View style={styles.chips}>
        {([40, 80, 120, 200] as Basis[]).map((b) => (
          <Chip key={b} label={String(b)} active={basis === b} onPress={() => setBasis(b)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>flexGrow</Text>
      <View style={styles.chips}>
        {([0, 1, 2] as Grow[]).map((g) => (
          <Chip key={g} label={String(g)} active={grow === g} onPress={() => setGrow(g)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>flexShrink</Text>
      <View style={styles.chips}>
        {([0, 1] as Shrink[]).map((s) => (
          <Chip key={s} label={String(s)} active={shrink === s} onPress={() => setShrink(s)} />
        ))}
      </View>

      <View style={[styles.row, isDark && styles.rowDark]}>
        <View style={[styles.side, { backgroundColor: '#2563EB' }]}>
          <Text style={styles.sideText}>L</Text>
        </View>
        <View
          style={[
            styles.mid,
            {
              flexBasis: basis,
              flexGrow: grow,
              flexShrink: shrink,
              backgroundColor: '#16A34A',
            },
          ]}
        >
          <Text style={styles.midText} numberOfLines={3}>
            mid{'\n'}b{basis} g{grow} s{shrink}
          </Text>
        </View>
        <View style={[styles.side, { backgroundColor: '#DC2626' }]}>
          <Text style={styles.sideText}>R</Text>
        </View>
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`// зелений\nflexBasis: ${basis}\nflexGrow: ${grow}\nflexShrink: ${shrink}\n\n// L і R: basis 56, grow 0, shrink 0`}
      </Text>

      <Text style={[styles.hint, { color: muted }]}>
        Спробуйте basis 200 + grow 0 + shrink 0 — середній «розпирає» рядок. Потім
        shrink 1 — він поступається. grow 2 при малому basis — забирає вільне місце
        сильніше, ніж grow 1 (тут сусіди grow 0, тож різниця 1 vs 2 менш помітна).
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 14, gap: 6 },
  h: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
  group: {
    fontSize: 11,
    fontWeight: '600',
    marginTop: 6,
    textTransform: 'uppercase',
  },
  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
  chip: {
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 8,
    backgroundColor: '#e2e8f0',
  },
  chipOn: { backgroundColor: '#2563EB' },
  chipText: { fontSize: 12, fontWeight: '600', color: '#0f172a' },
  chipTextOn: { color: '#fff' },
  row: {
    flexDirection: 'row',
    height: 88,
    marginTop: 12,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#93c5fd',
    backgroundColor: '#fff',
    padding: 8,
    gap: 6,
    alignItems: 'stretch',
  },
  rowDark: { backgroundColor: '#1c1c1e', borderColor: '#3b82f6' },
  side: {
    flexBasis: 56,
    flexGrow: 0,
    flexShrink: 0,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sideText: { color: '#fff', fontWeight: '800', fontSize: 16 },
  mid: {
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 4,
    minWidth: 0,
  },
  midText: {
    color: '#fff',
    fontWeight: '700',
    fontSize: 12,
    textAlign: 'center',
  },
  code: { fontSize: 12, fontFamily: 'monospace', lineHeight: 17, marginTop: 8 },
  hint: { fontSize: 12, lineHeight: 17, marginTop: 4 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

const ROWS = [
  {
    title: 'Київ — Карпати, довга назва поїздки для обрізання',
    price: '4 200 ₴',
  },
  {
    title: 'Львів',
    price: '890 ₴',
  },
  {
    title: 'Одеса · море · ранок · вечірній Привоз',
    price: '12 500 ₴',
  },
];

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const surface = isDark ? '#1c1c1e' : '#fff';
  const border = isDark ? '#3a3a3c' : '#e2e8f0';
  const bg = isDark ? '#000' : '#F8FAFC';

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Іконка · текст · ціна</Text>
      <Text style={[styles.sub, { color: muted }]}>
        Текст: flexGrow 1 + flexShrink 1 + numberOfLines. Ціна: shrink 0.
      </Text>

      <View style={styles.list}>
        {ROWS.map((r) => (
          <View
            key={r.title}
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <View style={styles.icon}>
              <Text style={styles.iconText}>{r.title.slice(0, 1)}</Text>
            </View>

            <Text style={[styles.title, { color: text }]} numberOfLines={1}>
              {r.title}
            </Text>

            <Text style={[styles.price, { color: muted }]}>{r.price}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 10 },
  h: { fontSize: 17, fontWeight: '700' },
  sub: { fontSize: 13, lineHeight: 18 },
  list: { gap: 8 },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    padding: 12,
    borderRadius: 12,
    borderWidth: 1,
  },
  icon: {
    // basis-еквівалент: фіксована ширина, grow/shrink 0
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: '#2563EB',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: 0,
    flexShrink: 0,
  },
  iconText: { color: '#fff', fontWeight: '700', fontSize: 16 },
  title: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0, // стартувати «з нуля» і рости — зручно для рівних рядків
    minWidth: 0, // важливо для обрізання тексту в деяких деревах layout
    fontSize: 16,
    fontWeight: '600',
  },
  price: {
    flexGrow: 0,
    flexShrink: 0,
    fontSize: 14,
    fontWeight: '700',
  },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

const CELLS = ['Київ', 'Львів', 'Одеса', 'Харків', 'Дніпро', 'Ужгород'];

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const cellBg = isDark ? '#1c1c1e' : '#fff';
  const border = isDark ? '#3a3a3c' : '#e2e8f0';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.title, { color: text }]}>Міста · wrap grid</Text>
      <Text style={[styles.sub, { color: muted }]}>
        flexDirection: row · flexWrap: wrap · width ~48%
      </Text>
      <View style={styles.grid}>
        {CELLS.map((name) => (
          <View
            key={name}
            style={[styles.cell, { backgroundColor: cellBg, borderColor: border }]}
          >
            <Text style={[styles.cellText, { color: text }]}>{name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 8 },
  title: { fontSize: 18, fontWeight: '700' },
  sub: { fontSize: 13, marginBottom: 8 },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  cell: {
    width: '48%',
    minHeight: 72,
    borderRadius: 12,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 12,
  },
  cellText: { fontSize: 16, fontWeight: '600' },
});

import { View, Text, ScrollView, Pressable, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const surface = isDark ? '#1c1c1e' : '#fff';
  const border = isDark ? '#3a3a3c' : '#e2e8f0';
  const bg = isDark ? '#000' : '#F8FAFC';

  return (
    <View style={[styles.root, { backgroundColor: bg }]}>
      <View style={[styles.header, { backgroundColor: surface, borderBottomColor: border }]}>
        <Text style={[styles.headerTitle, { color: text }]}>Мої поїздки</Text>
        <Text style={[styles.headerSub, { color: muted }]}>3 активні</Text>
      </View>

      <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent}>
        {['Київ — Карпати', 'Львівський вікенд', 'Одеса біля моря'].map((t) => (
          <View key={t} style={[styles.card, { backgroundColor: surface, borderColor: border }]}>
            <Text style={[styles.cardTitle, { color: text }]}>{t}</Text>
            <Text style={{ color: muted, fontSize: 13 }}>Торкніться, щоб відкрити (mock)</Text>
          </View>
        ))}
      </ScrollView>

      <View style={[styles.footer, { backgroundColor: surface, borderTopColor: border }]}>
        <Pressable style={styles.cta}>
          <Text style={styles.ctaText}>Нова поїздка</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
  header: {
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 12,
    borderBottomWidth: 1,
    gap: 2,
  },
  headerTitle: { fontSize: 20, fontWeight: '700' },
  headerSub: { fontSize: 13 },
  body: { flex: 1 },
  bodyContent: { padding: 16, gap: 10, paddingBottom: 24 },
  card: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 14,
    gap: 4,
  },
  cardTitle: { fontSize: 16, fontWeight: '600' },
  footer: {
    padding: 16,
    borderTopWidth: 1,
  },
  cta: {
    backgroundColor: '#2563EB',
    borderRadius: 12,
    paddingVertical: 14,
    alignItems: 'center',
  },
  ctaText: { color: '#fff', fontWeight: '700', fontSize: 16 },
});

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';

  return (
    <View style={[styles.root, isDark && { backgroundColor: '#000' }]}>
      <View style={[styles.top, isDark && { backgroundColor: '#1e3a5f' }]}>
        <Text style={styles.topLabel}>Зона A · flex: 2</Text>
        <Text style={[styles.topHint, { color: isDark ? '#93c5fd' : '#1e40af' }]}>
          Тут пізніше може бути карта або hero-зображення
        </Text>
      </View>
      <View style={[styles.bottom, isDark && { backgroundColor: '#1c1c1e' }]}>
        <Text style={[styles.bottomTitle, { color: text }]}>Зона B · flex: 1</Text>
        <Text style={{ color: isDark ? '#a1a1aa' : '#64748b', marginTop: 6 }}>
          Список місць, деталі, кнопки дій
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#F8FAFC' },
  top: {
    flex: 2,
    backgroundColor: '#dbeafe',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
    gap: 8,
  },
  topLabel: { fontSize: 18, fontWeight: '700', color: '#1e3a8a' },
  topHint: { fontSize: 13, textAlign: 'center' },
  bottom: {
    flex: 1,
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    marginTop: -12,
    padding: 20,
  },
  bottomTitle: { fontSize: 18, fontWeight: '700' },
});

import { View, Text, Pressable, StyleSheet, useColorScheme } from 'react-native';

export default function App() {
  const isDark = useColorScheme() === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const bg = isDark ? '#000' : '#F8FAFC';

  return (
    <View style={[styles.root, { backgroundColor: bg }]}>
      <View style={styles.header}>
        <Text style={[styles.headerTitle, { color: text }]}>Поїздки</Text>
      </View>

      <View style={styles.empty}>
        <View style={styles.iconCircle}>
          <Text style={styles.icon}>✈️</Text>
        </View>
        <Text style={[styles.title, { color: text }]}>Поки немає поїздок</Text>
        <Text style={[styles.desc, { color: muted }]}>
          Створіть першу — і тут з’явиться стрічка з датами та обкладинками.
        </Text>
        <Pressable style={styles.btn}>
          <Text style={styles.btnText}>Нова поїздка</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
  header: { padding: 16, paddingTop: 12 },
  headerTitle: { fontSize: 20, fontWeight: '700' },
  empty: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 32,
    gap: 10,
  },
  iconCircle: {
    width: 72,
    height: 72,
    borderRadius: 36,
    backgroundColor: 'rgba(37,99,235,0.12)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  icon: { fontSize: 32 },
  title: { fontSize: 18, fontWeight: '700', textAlign: 'center' },
  desc: { fontSize: 15, lineHeight: 22, textAlign: 'center', marginBottom: 8 },
  btn: {
    backgroundColor: '#2563EB',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 12,
    marginTop: 4,
  },
  btnText: { color: '#fff', fontWeight: '700', fontSize: 15 },
});