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

type Row = { id: string; title: string; subtitle: string };

const DATA: Row[] = Array.from({ length: 40 }, (_, i) => ({
  id: String(i + 1),
  title: `Поїздка ${i + 1}`,
  subtitle: i % 2 === 0 ? 'Гори' : 'Місто',
}));

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

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>FlatList · 40 рядків</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        У дереві — лише видимі. Прокрутіть список.
      </Text>
      <FlatList
        style={styles.list}
        data={DATA}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingBottom: 16, gap: 8 }}
        renderItem={({ item }) => (
          <View
            style={[
              styles.row,
              { backgroundColor: surface, borderColor: border },
            ]}
          >
            <Text style={[styles.title, { color: text }]}>{item.title}</Text>
            <Text style={{ color: muted, fontSize: 13 }}>{item.subtitle}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800', marginBottom: 4 },
  list: { flex: 1 },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
  title: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
});

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

type Row = { id: string; title: string };

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

  const [data, setData] = useState<Row[]>([]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <View style={styles.toolbar}>
        <Pressable
          onPress={() =>
            setData((prev) => [
              ...prev,
              { id: String(Date.now()), title: `Книга ${prev.length + 1}` },
            ])
          }
          style={[styles.btn, { backgroundColor: primary }]}
        >
          <Text style={styles.btnText}>Додати</Text>
        </Pressable>
        <Pressable
          onPress={() => setData([])}
          style={[styles.btn, { backgroundColor: surface, borderColor: border, borderWidth: 1 }]}
        >
          <Text style={{ color: text, fontWeight: '700' }}>Очистити</Text>
        </Pressable>
      </View>

      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        contentContainerStyle={
          data.length === 0 ? styles.emptyContainer : { paddingBottom: 16, gap: 8 }
        }
        ListHeaderComponent={
          <Text style={[styles.h, { color: text }]}>Моя полиця</Text>
        }
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={[styles.emptyTitle, { color: text }]}>Порожньо</Text>
            <Text style={{ color: muted, textAlign: 'center', lineHeight: 20 }}>
              Натисніть «Додати» — з’явиться перший рядок. ListEmptyComponent
              замінює «нічого».
            </Text>
          </View>
        }
        renderItem={({ item }) => (
          <View style={[styles.row, { backgroundColor: surface, borderColor: border }]}>
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  toolbar: { flexDirection: 'row', gap: 8, marginBottom: 12 },
  btn: {
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 10,
  },
  btnText: { color: '#fff', fontWeight: '700' },
  h: { fontSize: 18, fontWeight: '800', marginBottom: 12 },
  emptyContainer: { flexGrow: 1 },
  empty: {
    flex: 1,
    minHeight: 220,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingHorizontal: 12,
  },
  emptyTitle: { fontSize: 18, fontWeight: '700' },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
});

import { useCallback, useState } from 'react';
import {
  FlatList,
  RefreshControl,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Row = { id: string; title: string; stamp: number };

function makeRows(seed: number): Row[] {
  return Array.from({ length: 12 }, (_, i) => ({
    id: `${seed}-${i}`,
    title: `Елемент ${i + 1}`,
    stamp: seed,
  }));
}

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

  const [seed, setSeed] = useState(1);
  const [data, setData] = useState(() => makeRows(1));
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      const next = seed + 1;
      setSeed(next);
      setData(makeRows(next));
      setRefreshing(false);
    }, 800);
  }, [seed]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Потягніть униз</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        Оновлення №{seed} · mock-затримка 800 ms
      </Text>
      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ gap: 8, paddingBottom: 16 }}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={primary}
            colors={[primary]}
          />
        }
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
            <Text style={{ color: muted, fontSize: 12 }}>batch {item.stamp}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800' },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

import { useCallback, useState } from 'react';
import {
  ActivityIndicator,
  FlatList,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Row = { id: string; title: string };

const PAGE = 10;
const MAX = 50;

function pageItems(from: number, count: number): Row[] {
  return Array.from({ length: count }, (_, i) => {
    const n = from + i + 1;
    return { id: String(n), title: `Книга №${n}` };
  });
}

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

  const [data, setData] = useState(() => pageItems(0, PAGE));
  const [loadingMore, setLoadingMore] = useState(false);
  const hasMore = data.length < MAX;

  const loadMore = useCallback(() => {
    if (loadingMore || !hasMore) return;
    setLoadingMore(true);
    setTimeout(() => {
      setData((prev) => {
        const next = pageItems(prev.length, Math.min(PAGE, MAX - prev.length));
        return [...prev, ...next];
      });
      setLoadingMore(false);
    }, 700);
  }, [loadingMore, hasMore]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Пагінація UI</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        {data.length} / {MAX} · долистайте вниз
      </Text>
      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        onEndReached={loadMore}
        onEndReachedThreshold={0.3}
        contentContainerStyle={{ gap: 8, paddingBottom: 16 }}
        ListFooterComponent={
          loadingMore ? (
            <View style={styles.footer}>
              <ActivityIndicator color={primary} />
              <Text style={{ color: muted, marginTop: 8 }}>Завантаження…</Text>
            </View>
          ) : !hasMore ? (
            <Text style={{ color: muted, textAlign: 'center', padding: 12 }}>
              Це всі книги (mock)
            </Text>
          ) : null
        }
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800' },
  row: { borderWidth: 1, borderRadius: 12, padding: 14 },
  footer: { paddingVertical: 16, alignItems: 'center' },
});

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

type Book = { id: string; title: string; author: string };

const SECTIONS: { title: string; data: Book[] }[] = [
  {
    title: 'Фантастика',
    data: [
      { id: '1', title: 'Дюна', author: 'Ф. Герберт' },
      { id: '2', title: 'Ліва рука темряви', author: 'У. Ле Ґуїн' },
      { id: '3', title: 'Нейромант', author: 'В. Ґібсон' },
    ],
  },
  {
    title: 'Детектив',
    data: [
      { id: '4', title: 'Ім’я троянди', author: 'У. Еко' },
      { id: '5', title: 'Дівчина з тату', author: 'С. Ларссон' },
    ],
  },
  {
    title: 'Подорожі',
    data: [
      { id: '6', title: 'Дорога', author: 'Дж. Керуак' },
      { id: '7', title: 'Холод', author: 'А. Камю' },
      { id: '8', title: 'Nomad notes', author: 'Анонім' },
    ],
  },
];

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

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Каталог · SectionList</Text>
      <SectionList
        style={{ flex: 1 }}
        sections={SECTIONS}
        keyExtractor={(item) => item.id}
        stickySectionHeadersEnabled
        contentContainerStyle={{ paddingBottom: 24 }}
        renderSectionHeader={({ section: { title } }) => (
          <View style={[styles.sec, { backgroundColor: headerBg }]}>
            <Text style={{ color: primary, fontWeight: '800' }}>{title}</Text>
          </View>
        )}
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '700' }}>{item.title}</Text>
            <Text style={{ color: muted, marginTop: 4 }}>{item.author}</Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
        SectionSeparatorComponent={() => <View style={{ height: 12 }} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800', marginBottom: 12 },
  sec: {
    paddingVertical: 8,
    paddingHorizontal: 10,
    borderRadius: 8,
    marginBottom: 8,
  },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
});

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

type Book = {
  id: string;
  title: string;
  author: string;
  genre: string;
  year: number;
  rating: number;
};

const GENRES = ['Фантастика', 'Детектив', 'Подорожі', 'Історія', 'Поезія'] as const;
const AUTHORS = ['Коваленко', 'Шевченко', 'Лис', 'Мельник', 'Бондар'];

function buildBooks(seed: number, count = 80): Book[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `${seed}-${i}`,
    title: `Книга ${i + 1}`,
    author: AUTHORS[i % AUTHORS.length],
    genre: GENRES[i % GENRES.length],
    year: 1990 + (i % 35),
    rating: ((seed + i) % 50) / 10 + 5,
  }));
}

function toSections(books: Book[]) {
  const map = new Map<string, Book[]>();
  for (const b of books) {
    const list = map.get(b.genre) ?? [];
    list.push(b);
    map.set(b.genre, list);
  }
  return [...map.entries()]
    .sort(([a], [b]) => a.localeCompare(b, 'uk'))
    .map(([title, data]) => ({ title, data }));
}

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

  const [seed, setSeed] = useState(1);
  const [books, setBooks] = useState(() => buildBooks(1));
  const [refreshing, setRefreshing] = useState(false);
  const sections = useMemo(() => toSections(books), [books]);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setSeed((s) => {
        const next = s + 1;
        setBooks(buildBooks(next));
        return next;
      });
      setRefreshing(false);
    }, 700);
  }, []);

  return (
    <View style={[styles.safe, { backgroundColor: bg }]}>
      <View style={[styles.toolbar, { borderColor: border }]}>
        <Text style={[styles.h, { color: text }]}>Каталог книг</Text>
        <Text style={{ color: muted, fontSize: 13 }}>
          {books.length} · seed {seed} · SectionList
        </Text>
        <View style={styles.rowBtns}>
          <Pressable
            style={[styles.btn, { backgroundColor: primary }]}
            onPress={() => setBooks(buildBooks(seed))}
          >
            <Text style={styles.btnText}>Заповнити</Text>
          </Pressable>
          <Pressable
            style={[styles.btn, { backgroundColor: surface, borderColor: border, borderWidth: 1 }]}
            onPress={() => setBooks([])}
          >
            <Text style={{ color: text, fontWeight: '700' }}>Очистити</Text>
          </Pressable>
        </View>
      </View>

      <SectionList
        style={{ flex: 1 }}
        sections={sections}
        keyExtractor={(item) => item.id}
        stickySectionHeadersEnabled
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={primary}
            colors={[primary]}
          />
        }
        contentContainerStyle={
          books.length === 0
            ? { flexGrow: 1, padding: 16 }
            : { padding: 16, paddingBottom: 24 }
        }
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={[styles.emptyTitle, { color: text }]}>Полиця порожня</Text>
            <Text style={{ color: muted, textAlign: 'center' }}>
              Заповніть або pull-to-refresh
            </Text>
          </View>
        }
        renderSectionHeader={({ section: { title, data } }) => (
          <View style={[styles.sec, { backgroundColor: headerBg }]}>
            <Text style={{ color: primary, fontWeight: '800' }}>
              {title} · {data.length}
            </Text>
          </View>
        )}
        renderItem={({ item }) => (
          <View style={[styles.card, { backgroundColor: surface, borderColor: border }]}>
            <Text style={{ color: text, fontWeight: '700' }}>{item.title}</Text>
            <Text style={{ color: muted, marginTop: 4, fontSize: 13 }}>
              {item.author} · {item.year} · ★ {item.rating.toFixed(1)}
            </Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
        SectionSeparatorComponent={() => <View style={{ height: 10 }} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  toolbar: { padding: 16, gap: 6, borderBottomWidth: 1 },
  h: { fontSize: 20, fontWeight: '800' },
  rowBtns: { flexDirection: 'row', gap: 8, marginTop: 8 },
  btn: { paddingHorizontal: 12, paddingVertical: 10, borderRadius: 10 },
  btnText: { color: '#fff', fontWeight: '700' },
  empty: {
    flex: 1,
    minHeight: 220,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  emptyTitle: { fontSize: 18, fontWeight: '700' },
  sec: {
    paddingVertical: 8,
    paddingHorizontal: 10,
    borderRadius: 8,
    marginBottom: 8,
  },
  card: { borderWidth: 1, borderRadius: 12, padding: 14 },
});