Sticky Scroll

ScrollView 컴포넌트는 스크롤이 되는 영역의 상단에 고정된 헤더를 렌더링하는 stickyHeaderIndices라는 속성을 제공합니다. stickyHeaderIndices 속성에는 스크롤이 되는 영역의 인덱스를 배열 형태로 전달하여 고정된 헤더를 만들 수 있습니다.

따라서, lowerContainer가 스크롤이 되는 영역의 첫 번째 요소가 되도록 설정한 후, stickyHeaderIndices 속성에 0을 전달하여 lowerContainer를 고정된 헤더로 만들 수 있습니다.

아래는 stickyHeaderIndices를 사용하여 lowerContainer를 스크롤 영역의 고정된 헤더로 만드는 코드 예시입니다.

import React, { useEffect, useRef } from "react";
import {
  FlatList,
  ImageBackground,
  Pressable,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import Colors from "../../../assets/Colors";
import { BigText, BigTitle, SmallTitle } from "../../styled/styledComponents";
import { Feather } from "@expo/vector-icons";
import { RFPercentage } from "react-native-responsive-fontsize";
import { Avatar } from "react-native-paper";
import stores from "../../resource/stores";

function RankingHome({ navigation }) {
  const foodStores = (category) => {
    return stores.western;
  };

  useEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  const lowerContainerRef = useRef(null);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        stickyHeaderIndices={[0]}
        ref={lowerContainerRef}
        onContentSizeChange={() =>
          lowerContainerRef.current.scrollTo({ y: 0, animated: true })
        }
      >
        <View style={styles.lowerContainer}>
          <Pressable
            style={{
              flexDirection: "row",
              paddingVertical: RFPercentage(2),
              paddingLeft: RFPercentage(3),
              alignItems: "center",
              marginVertical: 20,
              backgroundColor: Colors.basicColor.grayTrans1,
              width: "100%",
              alignSelf: "center",
              justifyContent: "space-between",
            }}
          >
            <SmallTitle>숭실밥집 사용하시고 혜택 받아가세요</SmallTitle>
            <Pressable
              style={{ justifyContent: "center", alignItems: "center" }}
            >
              <Feather
                name="chevron-right"
                size={RFPercentage(5)}
                color="black"
              />
            </Pressable>
          </Pressable>
          <View>
            <FlatList
              horizontal={true}
              data={foodStores()}
              showsHorizontalScrollIndicator={false}
              renderItem={({ item }) => {
                return (
                  <ImageBackground
                    source={{ uri: item.imageList[3] }}
                    style={{
                      marginLeft: 10,
                      marginRight: 10,
                      borderRadius: 20,
                      overflow: "hidden",
                    }}
                    resizeMode="cover"
                  >
                    <View
                      style={{
                        width: RFPercentage(20),
                        height: RFPercentage(15),
                        backgroundColor: Colors.basicColor.grayTrans1,