shuffle-button.tsx

function PlaylistProfile() {
  // ...

  const PLAYLIST_ITEMS_OFFSET = PLAYLIST_HERO_HEIGHT + SEARCH_PLAYLISTS_HEIGHT;

  const clampShuffleButton = Animated.add(
    // make the button maintain its position during scroll - i.e the center of the window
    scrollY.current,
    // if we havent scrolled past the hero section, have the shuffle button move up with the scrollview
    scrollY.current.interpolate({
      inputRange: [0, PLAYLIST_ITEMS_OFFSET - SHUFFLE_PLAY_BUTTON_OFFSET],
      outputRange: [0, -PLAYLIST_ITEMS_OFFSET + SHUFFLE_PLAY_BUTTON_OFFSET],
      // after reaching the ~300 points translation, maintain the position at the top
      extrapolateRight: 'clamp',
    }),
  );

 
  return (
    <SafeAreaView style={{flex: 1}}>
      <Header />

      <Animated.ScrollView onScroll={handleScroll} style={{flex: 1}}>
        <SearchPlaylists />

        <TranslationContainer translateY={clampHeroSection}>
          <PlaylistHero>
            <View style={{height: 180, width: 180, backgroundColor: 'gray'}} />
          </PlaylistHero>
        </TranslationContainer>

        <PlaylistItems>
          <TranslationContainer translateY={clampShuffleButton}>
            <ShufflePlayButton />
          </TranslationContainer>
        </PlaylistItems>
      </Animated.ScrollView>
    </SafeAreaView>
  );
}