Finally get profile working how I want

bun.lock

···
         "@atproto/oauth-client-expo": "^0.0.5",
         "@expo/vector-icons": "^15.0.3",
         "@formatjs/intl-segmenter": "^12.0.5",
+        "@legendapp/list": "^2.0.19",
         "@pchmn/expo-material3-theme": "^1.3.2",
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
···
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@legendapp/list": ["@legendapp/list@2.0.19", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-zDWg8yg0smKxxk+M7gwAbZAnf5uczohPA+IjqLSkImz7+e9ytxeT0Mq35RBO9RTKODOXfV/aIgm1uqUHLBEdmg=="],
 
     "@material/material-color-utilities": ["@material/material-color-utilities@0.2.7", "", {}, "sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ=="],
 

package.json

···
     "@atproto/oauth-client-expo": "^0.0.5",
     "@expo/vector-icons": "^15.0.3",
     "@formatjs/intl-segmenter": "^12.0.5",
+    "@legendapp/list": "^2.0.19",
     "@pchmn/expo-material3-theme": "^1.3.2",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",

src/app/(authenticated)/profile/[userId].tsx

···
 import { ActorIdentifier } from "@atcute/lexicons";
 import { Image } from "expo-image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { FlashList, FlashListRef } from "@shopify/flash-list";
+import { LegendListRef } from "@legendapp/list";
+import { AnimatedLegendList } from "@legendapp/list/reanimated";
 import Post from "@/src/components/Post";
 import { AppBskyLabelerDefs } from "@atcute/bluesky";
-import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollOffset } from "react-native-reanimated";
+import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useState } from "react";
 
 type AuthorFeedFilters =
···
   const insets = useSafeAreaInsets();
   const router = useRouter();
 
-  const flashListRef = useAnimatedRef<FlashListRef<any>>();
-  const scrollOffset = useScrollOffset(flashListRef);
+  const listRef = useAnimatedRef<LegendListRef>();
+  const scrollOffset = useSharedValue(0);
+  const headerHeight = useSharedValue(0);
+  const topBarHeight = useSharedValue(0);
 
   const [feedFilter, setFeedFilter] = useState<AuthorFeedFilters>("posts_and_author_threads");
 
···
     pointerEvents: scrollOffset.value >= 150 ? "auto" : "none",
   }));
 
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [headerHeight.value, 0, -headerHeight.value],
+            [headerHeight.value * 2, 0, headerHeight.value]
+          ),
+        },
+      ],
+    };
+  });
+
+  const listAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      height: interpolate(
+        scrollOffset.value,
+        [headerHeight.value, 0, -headerHeight.value],
+        [topBarHeight.value, headerHeight.value, headerHeight.value]
+      ),
+    };
+  });
+
   return (
     <View style={{ backgroundColor: theme[colorScheme!].background, height: "100%", maxHeight: "100%" }}>
       <Animated.View
+        onLayout={(ev) =>
+          ev.nativeEvent.layout.height > topBarHeight.get() && topBarHeight.set(ev.nativeEvent.layout.height)
+        }
         style={[
           {
             backgroundColor: theme[colorScheme!].elevation.level2,
···
         </Pressable>
         <Pressable
           onPress={() => {
-            flashListRef.current!.scrollToTop({ animated: true });
+            listRef.current!.scrollToOffset({ offset: 0, animated: true });
           }}
         >
           <Text style={{ color: colorScheme === "light" ? "black" : "white", fontWeight: 700, fontSize: 14 }}>
···
         </Pressable>
       </Animated.View>
       <View style={{ height: "100%" }}>
-        <FlashList
-          ref={flashListRef}
-          scrollEventThrottle={16}
-          decelerationRate={"normal"}
-          snapToEnd={false}
-          snapToStart={false}
-          pagingEnabled={false}
-          data={["a", ...(authorFeedQuery.data?.pages ?? []).flatMap((val) => val.feed)]}
-          onEndReached={() => authorFeedQuery.fetchNextPage()}
-          refreshControl={<RefreshControl progressViewOffset={300} refreshing={authorFeedQuery.isRefetching} />}
-          ListFooterComponent={<View />}
-          ListFooterComponentStyle={{ height: 64 }}
-          onRefresh={() => authorFeedQuery.refetch()}
-          renderItem={({ item, target }) => {
-            if (typeof item === "string") {
-              return (
-                <View>
-                  <Pressable
+        <Animated.View
+          onLayout={(ev) =>
+            ev.nativeEvent.layout.height > headerHeight.get() && headerHeight.set(ev.nativeEvent.layout.height)
+          }
+          style={[headerAnimatedStyle, { zIndex: 1 }]}
+        >
+          <Pressable
+            style={{
+              position: "absolute",
+              top: insets.top,
+              zIndex: 1,
+              backgroundColor: "#00000055",
+              left: 8,
+              borderRadius: 32,
+            }}
+            onPress={() => router.dismiss(1)}
+          >
+            <Text
+              style={{
+                fontSize: 24,
+                color: "white",
+                textAlign: "center",
+                textAlignVertical: "center",
+                aspectRatio: 1,
+              }}
+            >
+              ←
+            </Text>
+          </Pressable>
+          <Image source={profileQuery.data?.banner} style={{ width: "100%", aspectRatio: 3 }} />
+          <View style={{ padding: 8 }}>
+            <Text style={{ color: colorScheme === "light" ? "black" : "white", fontWeight: 700, fontSize: 24 }}>
+              {profileQuery.data?.displayName}
+            </Text>
+            <Text style={{ color: colorScheme === "light" ? "black" : "white", opacity: 0.75 }}>
+              {"@" + profileQuery.data?.handle}
+            </Text>
+            {(profileQuery.data?.pronouns ||
+              (labelersQuery.isSuccess && (profileQuery.data?.labels?.length ?? 0) > 0)) && (
+              <View style={{ flexDirection: "row", gap: 4, flexWrap: "wrap", marginTop: 4 }}>
+                {profileQuery.data?.pronouns && (
+                  <Text
                     style={{
-                      position: "absolute",
-                      top: insets.top,
-                      zIndex: 1,
-                      backgroundColor: "#00000055",
-                      left: 8,
-                      borderRadius: 32,
+                      color: colorScheme === "light" ? "black" : "white",
+                      backgroundColor: theme[colorScheme!].elevation.level2,
+                      paddingVertical: 4,
+                      paddingHorizontal: 4,
+                      borderRadius: 4,
+                      alignSelf: "flex-start",
+                      fontSize: 10,
+                      fontWeight: 700,
                     }}
-                    onPress={() => router.dismiss(1)}
                   >
-                    <Text
-                      style={{
-                        fontSize: 24,
-                        color: "white",
-                        textAlign: "center",
-                        textAlignVertical: "center",
-                        aspectRatio: 1,
-                      }}
-                    >
-                      ←
-                    </Text>
-                  </Pressable>
-                  <Image source={profileQuery.data?.banner} style={{ width: "100%", aspectRatio: 3 }} />
-                  <View style={{ padding: 8 }}>
-                    <Text style={{ color: colorScheme === "light" ? "black" : "white", fontWeight: 700, fontSize: 24 }}>
-                      {profileQuery.data?.displayName}
-                    </Text>
-                    <Text style={{ color: colorScheme === "light" ? "black" : "white", opacity: 0.75 }}>
-                      {"@" + profileQuery.data?.handle}
-                    </Text>
-                    {(profileQuery.data?.pronouns ||
-                      (labelersQuery.isSuccess && (profileQuery.data?.labels?.length ?? 0) > 0)) && (
-                      <View style={{ flexDirection: "row", gap: 4, flexWrap: "wrap", marginTop: 4 }}>
-                        {profileQuery.data?.pronouns && (
+                    {profileQuery.data?.pronouns}
+                  </Text>
+                )}
+                {labelersQuery.isSuccess &&
+                  (profileQuery.data?.labels ?? [])
+                    .filter((val) => val.src !== val.uri.slice(5).split("/")[0])
+                    .map((val) => {
+                      const labeler = labelersQuery.data.views.find((labeler) => labeler.creator.did === val.src);
+                      const labelDefs = (labeler as AppBskyLabelerDefs.LabelerViewDetailed)?.policies
+                        .labelValueDefinitions;
+                      const label = labelDefs?.find((def) => def.identifier === val.val);
+
+                      if (!label) return null;
+
+                      return (
+                        <View
+                          key={val.src + val.val}
+                          style={{
+                            flexDirection: "row",
+                            alignItems: "center",
+                            gap: 2,
+                            backgroundColor: theme[colorScheme!].elevation.level2,
+                            paddingVertical: 4,
+                            paddingHorizontal: 4,
+                            borderRadius: 4,
+                          }}
+                        >
+                          <Image style={{ width: 12, height: 12, borderRadius: 16 }} source={labeler?.creator.avatar} />
                           <Text
                             style={{
                               color: colorScheme === "light" ? "black" : "white",
-                              backgroundColor: theme[colorScheme!].elevation.level2,
-                              paddingVertical: 4,
-                              paddingHorizontal: 4,
-                              borderRadius: 4,
-                              alignSelf: "flex-start",
                               fontSize: 10,
                               fontWeight: 700,
                             }}
                           >
-                            {profileQuery.data?.pronouns}
+                            {label?.locales.find((lc) => lc.lang === "en")?.name ?? val.val}
                           </Text>
-                        )}
-                        {labelersQuery.isSuccess &&
-                          (profileQuery.data?.labels ?? [])
-                            .filter((val) => val.src !== val.uri.slice(5).split("/")[0])
-                            .map((val) => {
-                              const labeler = labelersQuery.data.views.find(
-                                (labeler) => labeler.creator.did === val.src
-                              );
-                              const labelDefs = (labeler as AppBskyLabelerDefs.LabelerViewDetailed)?.policies
-                                .labelValueDefinitions;
-                              const label = labelDefs?.find((def) => def.identifier === val.val);
+                        </View>
+                      );
+                    })
+                    .filter((val) => val)}
+              </View>
+            )}
+          </View>
+          <View style={{ flexDirection: "row" }}>
+            <Pressable
+              style={{ padding: 8 }}
+              onPress={() => {
+                setFeedFilter("posts_and_author_threads");
+              }}
+            >
+              <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>Posts</Text>
+            </Pressable>
 
-                              if (!label) return null;
+            <Pressable
+              style={{ padding: 8 }}
+              onPress={() => {
+                setFeedFilter("posts_with_replies");
+              }}
+            >
+              <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>Replies</Text>
+            </Pressable>
 
-                              return (
-                                <View
-                                  key={val.src + val.val}
-                                  style={{
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    gap: 2,
-                                    backgroundColor: theme[colorScheme!].elevation.level2,
-                                    paddingVertical: 4,
-                                    paddingHorizontal: 4,
-                                    borderRadius: 4,
-                                  }}
-                                >
-                                  <Image
-                                    style={{ width: 12, height: 12, borderRadius: 16 }}
-                                    source={labeler?.creator.avatar}
-                                  />
-                                  <Text
-                                    style={{
-                                      color: colorScheme === "light" ? "black" : "white",
-                                      fontSize: 10,
-                                      fontWeight: 700,
-                                    }}
-                                  >
-                                    {label?.locales.find((lc) => lc.lang === "en")?.name ?? val.val}
-                                  </Text>
-                                </View>
-                              );
-                            })
-                            .filter((val) => val)}
-                      </View>
-                    )}
-                  </View>
-                  <View style={{ flexDirection: "row" }}>
-                    <Pressable
-                      style={{ padding: 8 }}
-                      onPress={() => {
-                        setFeedFilter("posts_and_author_threads");
-                      }}
-                    >
-                      <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>Posts</Text>
-                    </Pressable>
-
-                    <Pressable
-                      style={{ padding: 8 }}
-                      onPress={() => {
-                        setFeedFilter("posts_with_replies");
-                      }}
-                    >
-                      <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>
-                        Replies
-                      </Text>
-                    </Pressable>
-
-                    <Pressable
-                      style={{ padding: 8 }}
-                      onPress={() => {
-                        setFeedFilter("posts_with_media");
-                      }}
-                    >
-                      <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>Media</Text>
-                    </Pressable>
-                  </View>
-                </View>
-              );
-            } else return <Post post={item.post} />;
-          }}
-          getItemType={(item) => {
-            return typeof item === "string" ? "sectionHeader" : "row";
-          }}
-        />
+            <Pressable
+              style={{ padding: 8 }}
+              onPress={() => {
+                setFeedFilter("posts_with_media");
+              }}
+            >
+              <Text style={{ fontWeight: 700, color: colorScheme === "light" ? "black" : "white" }}>Media</Text>
+            </Pressable>
+          </View>
+        </Animated.View>
+        <Animated.View style={{ position: "absolute", height: "100%", top: 0, left: 0, width: "100%" }}>
+          <AnimatedLegendList
+            recycleItems
+            ref={listRef}
+            onScroll={(ev) => {
+              scrollOffset.set(ev.nativeEvent.contentOffset.y);
+            }}
+            scrollEventThrottle={16}
+            decelerationRate={"normal"}
+            snapToEnd={false}
+            snapToStart={false}
+            pagingEnabled={false}
+            data={(authorFeedQuery.data?.pages ?? []).flatMap((val) => val.feed)}
+            onEndReached={() => authorFeedQuery.fetchNextPage()}
+            refreshControl={<RefreshControl progressViewOffset={300} refreshing={authorFeedQuery.isRefetching} />}
+            ListHeaderComponent={<Animated.View style={[listAnimatedStyle]} />}
+            ListFooterComponent={<View />}
+            ListFooterComponentStyle={{ height: 64 }}
+            onRefresh={() => authorFeedQuery.refetch()}
+            renderItem={({ item }) => {
+              return <Post post={item.post} />;
+            }}
+          />
+        </Animated.View>
       </View>
     </View>
   );