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

export default function App() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <View style={styles.row}>
        <View style={[styles.box, { backgroundColor: '#2563EB' }]} />
        <View style={[styles.box, { backgroundColor: '#16A34A' }]} />
        <View style={[styles.box, { backgroundColor: '#DC2626' }]} />
        <Text style={{ color: isDark ? '#f5f5f7' : '#0f172a', fontSize: 16 }}>Підпис поруч</Text>
      </View>
      <Text style={[styles.hint, { color: isDark ? '#a1a1aa' : '#64748b' }]}>
        flexDirection: 'row' · gap: 8 · вкладені View
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F8FAFC',
    padding: 24,
    gap: 16,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    gap: 8,
    backgroundColor: 'rgba(37, 99, 235, 0.08)',
    borderRadius: 12,
  },
  box: {
    width: 40,
    height: 40,
    borderRadius: 8,
  },
  hint: {
    fontSize: 13,
  },
});

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

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

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <View style={[styles.card, { backgroundColor: surface, borderColor: border }]}>
        <View style={styles.header}>
          <View style={styles.dot} />
          <Text style={[styles.title, { color: text }]}>Картка поїздки</Text>
        </View>
        <Text style={[styles.body, { color: muted }]}>
          Зовнішній View задає відступи екрана. Внутрішній — білу «картку». Ще один View у шапці
          тримає крапку й заголовок в один рядок.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 20,
    justifyContent: 'center',
  },
  card: {
    borderRadius: 16,
    borderWidth: 1,
    padding: 16,
    gap: 12,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#2563EB',
  },
  title: {
    fontSize: 18,
    fontWeight: '700',
  },
  body: {
    fontSize: 15,
    lineHeight: 22,
  },
});

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

type Dir = 'column' | 'row';
type Radius = 0 | 8 | 20 | 999;
type Opacity = 1 | 0.5 | 0.2;
type Pad = 4 | 12 | 24;

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 [dir, setDir] = useState<Dir>('column');
  const [radius, setRadius] = useState<Radius>(8);
  const [opacity, setOpacity] = useState<Opacity>(1);
  const [pad, setPad] = useState<Pad>(12);
  const scheme = useColorScheme();
  const isDark = scheme === '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 }]}>View · style playground</Text>

      <Text style={[styles.group, { color: muted }]}>flexDirection</Text>
      <View style={styles.row}>
        <Chip label="column" active={dir === 'column'} onPress={() => setDir('column')} />
        <Chip label="row" active={dir === 'row'} onPress={() => setDir('row')} />
      </View>

      <Text style={[styles.group, { color: muted }]}>borderRadius</Text>
      <View style={styles.row}>
        {([0, 8, 20, 999] as Radius[]).map((r) => (
          <Chip key={r} label={String(r)} active={radius === r} onPress={() => setRadius(r)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>opacity</Text>
      <View style={styles.row}>
        {([1, 0.5, 0.2] as Opacity[]).map((o) => (
          <Chip key={o} label={String(o)} active={opacity === o} onPress={() => setOpacity(o)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>padding</Text>
      <View style={styles.row}>
        {([4, 12, 24] as Pad[]).map((p) => (
          <Chip key={p} label={`${p}`} active={pad === p} onPress={() => setPad(p)} />
        ))}
      </View>

      <View
        style={[
          styles.demo,
          {
            flexDirection: dir,
            borderRadius: radius,
            opacity,
            padding: pad,
          },
        ]}
      >
        <View style={styles.childA} />
        <View style={styles.childB} />
        <Text style={styles.demoLabel}>A + B</Text>
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`flexDirection: '${dir}'\nborderRadius: ${radius}\nopacity: ${opacity}\npadding: ${pad}`}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 16,
    gap: 6,
  },
  h: { fontSize: 17, fontWeight: '700', marginBottom: 4 },
  group: { fontSize: 11, fontWeight: '600', marginTop: 6, textTransform: 'uppercase' },
  row: { 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' },
  demo: {
    marginTop: 12,
    backgroundColor: '#2563EB',
    minHeight: 100,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  childA: { width: 36, height: 36, backgroundColor: '#93c5fd', borderRadius: 4 },
  childB: { width: 36, height: 36, backgroundColor: '#fde68a', borderRadius: 4 },
  demoLabel: { color: '#fff', fontWeight: '700', fontSize: 12 },
  code: { marginTop: 8, fontSize: 11, fontFamily: 'monospace', lineHeight: 16 },
});

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

export default function App() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <View style={styles.ok}>
        <Text style={styles.okLabel}>ДОБРЕ</Text>
        <Text style={{ color: isDark ? '#f5f5f7' : '#0f172a', fontSize: 18 }}>
          Привіт з Text
        </Text>
      </View>
      <View style={styles.bad}>
        <Text style={styles.badLabel}>ПОГАНО (не робіть так)</Text>
        <Text style={{ color: '#7f1d1d', fontSize: 14, lineHeight: 20 }}>
          {'<View>Привіт</View>'} — рядок без Text → помилка / warning у RN
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 24,
    gap: 16,
    backgroundColor: '#F8FAFC',
  },
  ok: {
    backgroundColor: '#dcfce7',
    borderRadius: 12,
    padding: 16,
    gap: 8,
  },
  okLabel: {
    fontSize: 12,
    fontWeight: '700',
    color: '#166534',
  },
  bad: {
    backgroundColor: '#fee2e2',
    borderRadius: 12,
    padding: 16,
    gap: 8,
  },
  badLabel: {
    fontSize: 12,
    fontWeight: '700',
    color: '#991b1b',
  },
});

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

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

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.line, { color: text }]}>
        Я <Text style={{ fontWeight: '700' }}>жирний</Text>
        {' і '}
        <Text style={{ color: '#DC2626' }}>червоний</Text>
        {', а ще '}
        <Text style={{ color: '#2563EB', textDecorationLine: 'underline' }}>посилання</Text>.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#F8FAFC',
  },
  line: {
    fontSize: 20,
    lineHeight: 30,
  },
});

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

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

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.label, { color: muted }]}>Всередині Text (inline)</Text>
      <View style={[styles.panel, { backgroundColor: panel }]}>
        <Text style={{ color: text, fontSize: 16, lineHeight: 24 }}>
          Ціна <Text style={{ fontWeight: '700', color: '#2563EB' }}>2 499 ₴</Text>
          <Text style={{ color: muted }}> · </Text>
          <Text style={{ color: '#16A34A' }}>в наявності</Text>
        </Text>
      </View>

      <Text style={[styles.label, { color: muted, marginTop: 20 }]}>Всередині View (блоки)</Text>
      <View style={[styles.panel, { backgroundColor: panel, gap: 4 }]}>
        <Text style={{ color: text, fontSize: 16, fontWeight: '700' }}>2 499 ₴</Text>
        <Text style={{ color: '#16A34A', fontSize: 16 }}>в наявності</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#F8FAFC',
  },
  label: {
    fontSize: 12,
    fontWeight: '600',
    marginBottom: 8,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  panel: {
    borderRadius: 12,
    padding: 16,
  },
});

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

const long =
  'Довгий опис поїздки в Карпати: Говерла, полонини, чай біля каміну, ранок у тумані та ще багато деталей, які не мають роздувати картку на весь екран.';

type Lines = 1 | 2 | 3 | 0;
type Mode = 'head' | 'middle' | 'tail' | 'clip';

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 [lines, setLines] = useState<Lines>(2);
  const [mode, setMode] = useState<Mode>('tail');
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const panel = isDark ? '#1c1c1e' : '#fff';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>numberOfLines + ellipsizeMode</Text>

      <Text style={[styles.group, { color: muted }]}>numberOfLines (0 = без ліміту)</Text>
      <View style={styles.row}>
        {([1, 2, 3, 0] as Lines[]).map((n) => (
          <Chip
            key={n}
            label={n === 0 ? '0' : String(n)}
            active={lines === n}
            onPress={() => setLines(n)}
          />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>ellipsizeMode</Text>
      <View style={styles.row}>
        {(['head', 'middle', 'tail', 'clip'] as Mode[]).map((m) => (
          <Chip key={m} label={m} active={mode === m} onPress={() => setMode(m)} />
        ))}
      </View>

      <View style={[styles.panel, { backgroundColor: panel }]}>
        <Text
          style={[styles.body, { color: text }]}
          numberOfLines={lines === 0 ? undefined : lines}
          ellipsizeMode={mode}
        >
          {long}
        </Text>
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`numberOfLines={${lines === 0 ? '/* unlimited */' : lines}}\nellipsizeMode="${mode}"`}
      </Text>
      <Text style={[styles.note, { color: muted }]}>
        На Android при numberOfLines більше 1 надійніше працює tail.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 6 },
  h: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
  group: { fontSize: 11, fontWeight: '600', marginTop: 8, textTransform: 'uppercase' },
  row: { 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' },
  panel: {
    marginTop: 12,
    borderRadius: 12,
    padding: 14,
    minHeight: 100,
    justifyContent: 'center',
  },
  body: { fontSize: 16, lineHeight: 24 },
  code: { marginTop: 10, fontSize: 11, fontFamily: 'monospace', lineHeight: 16 },
  note: { fontSize: 12, lineHeight: 18, marginTop: 4 },
});

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

type Align = 'left' | 'center' | 'right';
type Weight = '400' | '600' | '700';
type Size = 14 | 18 | 24;

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 [align, setAlign] = useState<Align>('left');
  const [weight, setWeight] = useState<Weight>('400');
  const [size, setSize] = useState<Size>(18);
  const [colored, setColored] = useState(false);
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';
  const panel = isDark ? '#1c1c1e' : '#fff';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.h, { color: text }]}>Text · style playground</Text>

      <Text style={[styles.group, { color: muted }]}>textAlign</Text>
      <View style={styles.row}>
        {(['left', 'center', 'right'] as Align[]).map((a) => (
          <Chip key={a} label={a} active={align === a} onPress={() => setAlign(a)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>fontWeight</Text>
      <View style={styles.row}>
        {(['400', '600', '700'] as Weight[]).map((w) => (
          <Chip key={w} label={w} active={weight === w} onPress={() => setWeight(w)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>fontSize</Text>
      <View style={styles.row}>
        {([14, 18, 24] as Size[]).map((s) => (
          <Chip key={s} label={String(s)} active={size === s} onPress={() => setSize(s)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>color</Text>
      <View style={styles.row}>
        <Chip label="default" active={!colored} onPress={() => setColored(false)} />
        <Chip label="primary" active={colored} onPress={() => setColored(true)} />
      </View>

      <View style={[styles.panel, { backgroundColor: panel }]}>
        <Text
          style={{
            color: colored ? '#2563EB' : text,
            textAlign: align,
            fontWeight: weight,
            fontSize: size,
            lineHeight: size + 8,
          }}
        >
          Карпати на вихідні — заголовок картки
        </Text>
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`textAlign: '${align}'\nfontWeight: '${weight}'\nfontSize: ${size}\ncolor: ${colored ? "'#2563EB'" : 'theme'}`}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 16, gap: 6 },
  h: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
  group: { fontSize: 11, fontWeight: '600', marginTop: 8, textTransform: 'uppercase' },
  row: { 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' },
  panel: {
    marginTop: 12,
    borderRadius: 12,
    padding: 16,
    minHeight: 88,
    justifyContent: 'center',
  },
  code: { marginTop: 10, fontSize: 11, fontFamily: 'monospace', lineHeight: 16 },
});

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

const URI = 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&q=80';

type Mode = 'cover' | 'contain' | 'stretch' | 'center';
type Blur = 0 | 4 | 12 | 24;
type H = 100 | 140 | 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 [mode, setMode] = useState<Mode>('cover');
  const [blur, setBlur] = useState<Blur>(0);
  const [h, setH] = useState<H>(140);
  const [round, setRound] = useState(true);
  const scheme = useColorScheme();
  const isDark = scheme === '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 }]}>Image · props playground</Text>

      <Text style={[styles.group, { color: muted }]}>resizeMode</Text>
      <View style={styles.row}>
        {(['cover', 'contain', 'stretch', 'center'] as Mode[]).map((m) => (
          <Chip key={m} label={m} active={mode === m} onPress={() => setMode(m)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>blurRadius</Text>
      <View style={styles.row}>
        {([0, 4, 12, 24] as Blur[]).map((b) => (
          <Chip key={b} label={String(b)} active={blur === b} onPress={() => setBlur(b)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>style.height</Text>
      <View style={styles.row}>
        {([100, 140, 200] as H[]).map((v) => (
          <Chip key={v} label={`${v}`} active={h === v} onPress={() => setH(v)} />
        ))}
      </View>

      <Text style={[styles.group, { color: muted }]}>overflow + borderRadius (на батьку)</Text>
      <View style={styles.row}>
        <Chip label="square" active={!round} onPress={() => setRound(false)} />
        <Chip label="rounded 16" active={round} onPress={() => setRound(true)} />
      </View>

      <View
        style={[
          styles.frame,
          {
            height: h,
            borderRadius: round ? 16 : 0,
            backgroundColor: isDark ? '#333' : '#e2e8f0',
          },
        ]}
      >
        <Image
          source={{ uri: URI }}
          style={styles.img}
          resizeMode={mode}
          blurRadius={blur}
        />
      </View>

      <Text style={[styles.code, { color: muted }]}>
        {`resizeMode="${mode}"\nblurRadius={${blur}}\nstyle={{ width: '100%', height: ${h} }}\nborderRadius на View: ${round ? 16 : 0}`}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#F8FAFC', padding: 14, gap: 4 },
  h: { fontSize: 16, fontWeight: '700', marginBottom: 2 },
  group: { fontSize: 11, fontWeight: '600', marginTop: 6, textTransform: 'uppercase' },
  row: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
  chip: {
    paddingHorizontal: 9,
    paddingVertical: 5,
    borderRadius: 8,
    backgroundColor: '#e2e8f0',
  },
  chipOn: { backgroundColor: '#2563EB' },
  chipText: { fontSize: 11, fontWeight: '600', color: '#0f172a' },
  chipTextOn: { color: '#fff' },
  frame: {
    marginTop: 10,
    width: '100%',
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: '#cbd5e1',
  },
  img: { width: '100%', height: '100%' },
  code: { marginTop: 8, fontSize: 11, fontFamily: 'monospace', lineHeight: 15 },
});

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

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

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <View style={[styles.card, { backgroundColor: surface, borderColor: border }]}>
        <Image
          source={{
            uri: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80',
          }}
          style={styles.cover}
          resizeMode="cover"
        />
        <View style={styles.body}>
          <Text style={[styles.title, { color: text }]}>Одеса біля моря</Text>
          <Text style={{ color: muted, fontSize: 14 }}>
            width + height обовʼязкові для remote Image
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 20,
    justifyContent: 'center',
  },
  card: {
    borderRadius: 16,
    borderWidth: 1,
    overflow: 'hidden',
  },
  cover: {
    width: '100%',
    height: 160,
    backgroundColor: '#e2e8f0',
  },
  body: {
    padding: 16,
    gap: 6,
  },
  title: {
    fontSize: 18,
    fontWeight: '700',
  },
});

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

export default function App() {
  const [log, setLog] = useState<string[]>([]);
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';
  const text = isDark ? '#f5f5f7' : '#0f172a';
  const muted = isDark ? '#a1a1aa' : '#64748b';

  const push = (msg: string) => setLog((prev) => [msg, ...prev].slice(0, 8));

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.title, { color: text }]}>Pressable</Text>
      <Text style={{ color: muted, marginBottom: 16, fontSize: 13 }}>
        Короткий тап і long press (~500 ms)
      </Text>

      <Pressable
        onPressIn={() => push('onPressIn')}
        onPressOut={() => push('onPressOut')}
        onPress={() => push('onPress')}
        onLongPress={() => push('onLongPress')}
        delayLongPress={500}
        style={({ pressed }) => [styles.btn, pressed && styles.btnPressed]}
      >
        {({ pressed }) => (
          <Text style={styles.btnText}>{pressed ? 'Утримуєте…' : 'Натисніть / утримайте'}</Text>
        )}
      </Pressable>

      <View style={styles.logBox}>
        {log.length === 0 ? (
          <Text style={{ color: muted, fontSize: 13 }}>Події з’являться тут</Text>
        ) : (
          log.map((line, i) => (
            <Text key={`${line}-${i}`} style={[styles.logLine, { color: text }]}>
              {line}
            </Text>
          ))
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#F8FAFC',
    padding: 24,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
  },
  btn: {
    backgroundColor: '#2563EB',
    paddingVertical: 16,
    borderRadius: 14,
    alignItems: 'center',
  },
  btnPressed: {
    backgroundColor: '#1D4ED8',
    transform: [{ scale: 0.98 }],
  },
  btnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  logBox: {
    marginTop: 20,
    minHeight: 140,
    gap: 4,
  },
  logLine: {
    fontSize: 13,
    fontFamily: 'monospace',
  },
});

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

export default function App() {
  const [count, setCount] = useState(0);
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <View style={[styles.screen, isDark && { backgroundColor: '#000' }]}>
      <Text style={[styles.count, { color: isDark ? '#f5f5f7' : '#111827' }]}>{count}</Text>
      <View style={styles.row}>
        <Pressable
          onPress={() => setCount((c) => c - 1)}
          style={({ pressed }) => [styles.chip, pressed && { opacity: 0.8 }]}
        >
          <Text style={styles.chipText}>−1</Text>
        </Pressable>
        <Pressable
          onPress={() => setCount((c) => c + 1)}
          style={({ pressed }) => [styles.chip, styles.chipPrimary, pressed && { opacity: 0.8 }]}
        >
          <Text style={styles.chipText}>+1</Text>
        </Pressable>
      </View>
      <Pressable onPress={() => setCount(0)} hitSlop={12}>
        <Text style={{ color: isDark ? '#a1a1aa' : '#64748b', marginTop: 16 }}>Скинути</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F8FAFC',
    padding: 24,
  },
  count: {
    fontSize: 56,
    fontWeight: '700',
    marginBottom: 24,
  },
  row: {
    flexDirection: 'row',
    gap: 12,
  },
  chip: {
    backgroundColor: '#64748B',
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 14,
  },
  chipPrimary: {
    backgroundColor: '#2563EB',
  },
  chipText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '700',
  },
});