ScrollView — що це, контейнер прокрутки та React Native

Що таке ScrollView у React Native

ScrollView — це компонент React Native, який обгортає свій вміст у контейнер із прокруткою. Якщо вміст виходить за межі екрана, користувач може прокручувати його вертикально або горизонтально. ScrollView рендерить усі дочірні елементи під час монтування, незалежно від того, чи видимі вони на екрані.

На відміну від FlatList, який рендерить лише видимі елементи (ліниве рендерування), ScrollView створює всі нативні представлення одразу. Це робить ScrollView зручним для форм, сторінок налаштувань, карток товарів на одному екрані — скрізь, де кількість дочірніх елементів невелика (до 20-30) або їх точна кількість заздалегідь невідома.

Згідно з React Native Using ScrollView, 2024, ScrollView підтримує вкладену прокрутку (наприклад, ScrollView всередині ScrollView), bounce-ефект при досягненні краю, індикатори прокрутки, закріплення позиції (snap) та обробку жестів. На iOS ScrollView автоматично додає відступ під SafeArea через contentInsetAdjustmentBehavior.

Властивості та API компонента ScrollView

ScrollView надає багатий набір властивостей для керування поведінкою прокрутки, зовнішнім виглядом та інтерактивністю. Розглянемо ключові групи: керування скролом, візуальні налаштування, події та платформенні особливості.

Керування напрямком та скролом

horizontal — перемикає напрямок прокрутки з вертикального (за замовчуванням) на горизонтальний. scrollEnabled — вимикає прокрутку за потреби. showsVerticalScrollIndicator та showsHorizontalScrollIndicator керують відображенням індикаторів скролу. bounces (iOS) вмикає/вимикає bounce-ефект при досягненні краю вмісту.

Події ScrollView

Основна подія — onScroll, яка викликається при кожному скролі та передає об'єкт із nativeEvent, що містить contentOffset (поточна позиція), contentSize (розмір вмісту), layoutMeasurement (розмір видимої області). onMomentumScrollEnd викликається після завершення інерційного скролу. onScrollEndDrag — коли користувач відпустив екран. Ці події використовуються для реалізації нескінченної прокрутки, паралаксу та лінивого завантаження.

Програмне керування через ref

ScrollView надає методи для програмного керування через реф: scrollTo({x, y, animated}) прокручує до вказаних координат, scrollToEnd({animated}) — у кінець вмісту, flashScrollIndicators() — тимчасово показує індикатори скролу.

const scrollRef = useRef(null);

// Прокрутити вгору
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// Прокрутити в кінець
scrollRef.current.scrollToEnd({ animated: true });

Програмне керування скролом часто використовується в чатах (автоскрол до останнього повідомлення), формах (скрол до поля з помилкою) та каруселях (програмне перегортання).

Відмінності ScrollView від FlatList

Вибір між ScrollView та FlatList — одне з ключових архітектурних рішень у React Native. Обидва компоненти забезпечують прокрутку, але використовують принципово різні стратегії рендерування. ScrollView рендерить усе одразу, FlatList — лише видимі елементи.

Правило вибору: ScrollView — для екранів, де кількість дочірніх елементів відома та не перевищує 20-30 (профіль користувача, форма налаштування, сторінка товару). FlatList — для списків із потенційно великою кількістю елементів (стрічка новин, каталог товарів, повідомлення чату). Якщо вміст різнорідний (заголовок, форма, картка, футер) — ScrollView кращий, оскільки FlatList очікує однотипні елементи.

Горизонтальна прокрутка та пагінація

ScrollView підтримує горизонтальну прокрутку через пропс horizontal, що робить його ідеальним для каруселей, галерей зображень, вкладок та горизонтальних списків. У поєднанні з пропсом pagingEnabled (iOS) або snapToInterval ScrollView перетворюється на компонент для посторінкової навігації.

Горизонтальна карусель

Властивість horizontal перемикає напрямок прокрутки. pagingEnabled (iOS) вмикає посторінкову прокрутку, при якій скрол зупиняється лише на межах елементів. snapToInterval задає крок прив'язки в пікселях для обох платформ.

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

У цій каруселі pagingEnabled автоматично прив'язує скрол до меж кожного зображення. onMomentumScrollEnd дозволяє оновлювати індикатор поточної сторінки. Така карусель працює нативно та підтримує інерційний скрол.

Прив'язка до позиції (Snap)

Для нестандартних кроків прив'язки використовується snapToInterval (розмір кроку в пікселях) та snapToAlignment (start, center, end). За допомогою snapToOffsets можна задати масив конкретних позицій для прив'язки. Це корисно для горизонтальних списків із картками різного розміру.

Практичні приклади з ScrollView

Розглянемо два типові сценарії: екран із формою (вертикальний скрол) та горизонтальний список категорій. Обидва використовують ScrollView з різними пропсами для оптимальної поведінки.

Приклад 1: екран профілю з формою

Сторінка редагування профілю містить різнорідні елементи: аватар, кілька полів введення, перемикачі та кнопку збереження. ScrollView дозволяє скролити всю сторінку цілком, а не кожен блок окремо.

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

Пропс keyboardShouldPersistTaps: 'handled' дозволяє скролити та взаємодіяти з формою, коли клавіатура відкрита. contentContainerStyle застосовує відступи до всього вмісту. Цей патерн використовується у всіх екранах із формами в React Native.

Приклад 2: горизонтальний список категорій

Для навігації по категоріях (чати, фільтри, вкладки) використовується горизонтальний ScrollView із чіпсами. Такий компонент часто зустрічається в додатках маркетплейсів та соцмереж.

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

Горизонтальний ScrollView із вимкненим індикатором — стандарт для стрічки категорій. Кожен чіп — окремий компонент зі станом вибору. Пропс showsHorizontalScrollIndicator: false прибирає смугу прокрутки, що відповідає очікуванням користувачів мобільних додатків.