Added sentry support

components/status/StatusList.tsx

@@ -22,9 +22,20 @@ import debounce from 'lodash/debounce';
 import NetInfo from '@react-native-community/netinfo';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
 
-const StatusList = () => {
+const HEADER_HEIGHT = 150;
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
+type StatusListProps = {
+  headerImage?: React.ReactNode;
+  headerTitle?: React.ReactNode;
+};
+
+const StatusList = ({headerImage, headerTitle}: StatusListProps) => {
   const scheme = useColorScheme() ?? 'dark';
+  const bottom = useBottomTabOverflow();
 
   const [statuses, setStatuses] = useState<UserStatus[]>([]);
   const [loading, setLoading] = useState(true);
@@ -40,6 +51,19 @@ const StatusList = () => {
   const subscriptionRef = useRef<RealtimeChannel | null>(null);
   const appStateRef = useRef(AppState.currentState);
   const pendingUpdatesRef = useRef<Set<string>>(new Set());
+
+  // Parallax animation setup
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const headerTranslateY = scrollY.interpolate({
+    inputRange: [0, HEADER_HEIGHT],
+    outputRange: [0, -HEADER_HEIGHT/2],
+    extrapolate: 'clamp',
+  });
+  const headerScale = scrollY.interpolate({
+    inputRange: [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+    outputRange: [2, 1, 1],
+    extrapolate: 'clamp',
+  });
   
   // Debounced version of the status update handler
   const debouncedHandleStatusUpdates = useRef(
@@ -402,6 +426,25 @@ const StatusList = () => {
       </TouchableOpacity>
     );
   }, [formatDate, handleUserSelect, recentlyUpdatedIds]);
+
+  // Render the header component
+  const renderHeader = () => (
+    <Animated.View
+      style={[
+        styles.header,
+        {
+          backgroundColor: Colors[scheme].accent,
+          transform: [
+            { translateY: headerTranslateY },
+            { scale: headerScale }
+          ]
+        }
+      ]}
+    >
+      {headerImage}
+      {headerTitle}
+    </Animated.View>
+  );
   
   // Empty list component
   const ListEmptyComponent = useCallback(() => (
@@ -427,13 +470,15 @@ const StatusList = () => {
           <ThemedText style={styles.offlineText}>You are offline</ThemedText>
         </ThemedView>
       )}
+
+      {renderHeader()}
       
-      <FlatList
+      <AnimatedFlatList
         data={statuses}
         keyExtractor={(item) => item.id}
         refreshControl={
-          <RefreshControl 
-            refreshing={refreshing} 
+          <RefreshControl
+            refreshing={refreshing}
             onRefresh={onRefresh}
             enabled={isConnected}
           />
@@ -447,6 +492,16 @@ const StatusList = () => {
         getItemLayout={(data, index) => (
           {length: 120, offset: 120 * index, index}
         )}
+        contentContainerStyle={{
+          paddingTop: HEADER_HEIGHT, // Add padding to account for the header
+          paddingBottom: bottom,
+          paddingHorizontal: 16,
+        }}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: true }
+        )}
+        scrollEventThrottle={16}
       />
       
       {selectedUser && (
@@ -467,6 +522,15 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  header: {
+    height: HEADER_HEIGHT,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    overflow: 'hidden',
+  },
   loadingContainer: {
     flex: 1,
     justifyContent: 'center',