Disappearing header on scroll and appears when no longer scrolling in react-native

Question

I have a flat List and I want when I scroll to disappear the header I have and when stop scrolling to show the header. I almost got it to work, but the styling is not good. Here is my implementation:

Main Screen (ExploreScreen):

const HEADER_HEIGHT = 250;


const scrollY = new Animated.Value(0);
const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);
const translateY = diffClamp.interpolate({
  inputRange: [0, HEADER_HEIGHT],
  outputRange: [0, -HEADER_HEIGHT],
});

...
return (
   <Animated.View
      style={{
        transform: [{translateY: translateY}],
        elevation: 4,
        zIndex: 100,
      }}>
      <ExploreHeader
        theme={theme}
        isDark={isDark}
        categories={categories}
        handleCategoryClick={handleCategoryClick}
        selectedCategory={selectedCategory}
        contentLoading={contentLoading}
        queries={queries}
        selectedQuery={selectedQuery}
        handleQueryClick={handleQueryClick}
      />
    </Animated.View>

    <ExploreData
        selectedCategory={selectedCategory}
        onRefresh={onRefresh}
        recipes={recipes}
        contentLoading={contentLoading}
        refreshing={refreshing}
        updateUser={updateUser}
        scrollY={scrollY}
      />

_

And in exploreHeader styling:

exploreHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 250,
    borderBottomLeftRadius: 25,
    borderBottomRightRadius: 25,
    paddingBottom: wp(4),
  },

And finally in ExploreData where the flatlist is:

<FlatList
          showsVerticalScrollIndicator={false}
          data={recipes}
          ListFooterComponent={renderFooter}
          refreshing={contentLoading}
          maxToRenderPerBatch={5}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }
          contentContainerStyle={styles.listStyles}
          renderItem={renderChefItem}
          onScroll={(e) => {
            scrollY.setValue(e.nativeEvent.contentOffset.y);
          }}
        />

Shahar Eliyahu · Accepted Answer · 2021-09-05 13:44:54Z

2

You can use onScrollEndDrag and onScrollBeginDrag to toggle the visibility of the header.

answered Sep 5, 2021 at 13:44

Shahar Eliyahu

1261 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disappearing header on scroll and appears when no longer scrolling in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related