Fixed component on scroll a flashlist

Question

I need help, I have 2 components at the top of my screen, the header, and below a filters slide component, below them I have a flashlist with several cards, I need that when scrolling down the flashlist, only the filters slide stick to the top of the screen

this is my home return:

 return (
    <Container>
      <View style={{ height: "100%" }}>
        <FlashList
          ref={flatListRef}
          ListHeaderComponent={
            <View style={{ flex: 1 }}>
              <Header HeaderType="LOGO" ContentText="" />
              <SlideFilterList setIsSelect={setIsSelect} isSelect={isSelect} />
            </View>
          }
          data={promo}
          ListEmptyComponent={<View style={{ alignItems: "center" }}></View>}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <View style={{ width: "100%", alignItems: "center" }}>
              <ProductCard product={item} />
            </View>
          )}
          refreshing={false}
          showsVerticalScrollIndicator={false}
          ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
          onEndReached={handleEndReached}
          onEndReachedThreshold={0.2}
          estimatedItemSize={200}
          ListFooterComponent={
            loading ? (
              <View>
                <ActivityIndicator
                  size={25}
                  color={theme.defaultTheme.primary.medium}
                />
              </View>
            ) : (
              <></>
            )
          }
        />
      </View>
    </Container>
  );

What can I do? I wouldn't want to use a listener on the scroll to do this implementation because it can hurt performance.