fix: update components for react-native-reanimated 4 compatibility (#52)

- FadingView: pass useAnimatedProps result directly instead of spreading,
  which broke Reanimated 4's internal animated proxy tracking
- ScrollView: use Animated.ScrollView from reanimated instead of
  createAnimatedComponent(ScrollView) for proper Reanimated 4 support
- Header/LargeHeader: convert View to Animated.View to support animated
  styles passed by consumers, preventing the "animated style to
  non-animated component" error in Reanimated 4

https://claude.ai/code/session_01K8dw23CbhakgyCBmuwr5jP

Co-authored-by: Claude <noreply@anthropic.com>

Author: haswalt

src/components/containers/FadingView.tsx

@@ -45,13 +45,14 @@ const FadingView = forwardRef<Animated.View, FadingViewProps>(
       children,
       style,
       opacity,
-      animatedProps = {},
+      // Remove animatedProps from rest to avoid passing stale/spread values
+      animatedProps: _externalAnimatedProps,
       opacityThresholdToEnablePointerEvents = 1,
       ...rest
     },
     ref
   ) => {
-    const _animatedProps = useAnimatedProps(() => {
+    const animatedProps = useAnimatedProps(() => {
       const _pointerEvents: AnimatedViewPointerEvents =
         opacity.value >= opacityThresholdToEnablePointerEvents ? 'auto' : 'none';
       return { pointerEvents: _pointerEvents };
@@ -62,7 +63,7 @@ const FadingView = forwardRef<Animated.View, FadingViewProps>(
       <Animated.View
         ref={ref}
         style={[styles.container, style, fadeStyle]}
-        animatedProps={{ ..._animatedProps, ...animatedProps }}
+        animatedProps={animatedProps}
         {...rest}
       >
         {children}

src/components/containers/ScrollView.tsx

@@ -1,15 +1,13 @@
 import React, { useImperativeHandle } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, { useAnimatedRef } from 'react-native-reanimated';
 
 import FadingView from './FadingView';
 import { useScrollContainerLogic } from './useScrollContainerLogic';
 import type { SharedScrollContainerProps } from './types';
 
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
-
-type AnimatedScrollViewProps = React.ComponentProps<typeof AnimatedScrollView> & {
+type AnimatedScrollViewProps = React.ComponentProps<typeof Animated.ScrollView> & {
   children?: React.ReactNode;
 };
 
@@ -91,7 +89,7 @@ const ScrollViewWithHeadersInputComp = (
       ]}
     >
       {!absoluteHeader && HeaderComponent({ showNavBar, scrollY })}
-      <AnimatedScrollView
+      <Animated.ScrollView
         ref={scrollRef}
         scrollEventThrottle={16}
         overScrollMode="auto"
@@ -152,7 +150,7 @@ const ScrollViewWithHeadersInputComp = (
         {LargeHeaderSubtitleComponent && LargeHeaderSubtitleComponent({ showNavBar, scrollY })}
 
         {children}
-      </AnimatedScrollView>
+      </Animated.ScrollView>
 
       {absoluteHeader && (
         <View style={styles.absoluteHeader} onLayout={onAbsoluteHeaderLayout}>

src/components/headers/Header.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { FadingView } from '../containers';
 import { HeaderBottomBorder } from '../line';
@@ -41,10 +42,12 @@ const Header: React.FC<HeaderProps> = ({
   const noHeaderLeftRight = !headerLeft && !headerRight;
 
   return (
-    <View>
+    <Animated.View>
       {SurfaceComponent && SurfaceComponent({ showNavBar })}
 
-      <View style={[styles.container, !ignoreTopSafeArea && { paddingTop: top }, headerStyle]}>
+      <Animated.View
+        style={[styles.container, !ignoreTopSafeArea && { paddingTop: top }, headerStyle]}
+      >
         {headerLeftFadesIn ? (
           <FadingView
             opacity={showNavBar}
@@ -58,7 +61,7 @@ const Header: React.FC<HeaderProps> = ({
             {headerLeft}
           </FadingView>
         ) : (
-          <View
+          <Animated.View
             style={[
               styles.leftContainer,
               noHeaderLeftRight && styles.noFlex,
@@ -67,7 +70,7 @@ const Header: React.FC<HeaderProps> = ({
             ]}
           >
             {headerLeft}
-          </View>
+          </Animated.View>
         )}
 
         {headerCenter &&
@@ -79,9 +82,11 @@ const Header: React.FC<HeaderProps> = ({
               {headerCenter}
             </FadingView>
           ) : (
-            <View style={[styles.centerContainer, { width: centerWidth }, headerCenterStyle]}>
+            <Animated.View
+              style={[styles.centerContainer, { width: centerWidth }, headerCenterStyle]}
+            >
               {headerCenter}
-            </View>
+            </Animated.View>
           ))}
 
         {headerRightFadesIn ? (
@@ -97,7 +102,7 @@ const Header: React.FC<HeaderProps> = ({
             {headerRight}
           </FadingView>
         ) : (
-          <View
+          <Animated.View
             style={[
               styles.rightContainer,
               noHeaderLeftRight && styles.noFlex,
@@ -106,9 +111,9 @@ const Header: React.FC<HeaderProps> = ({
             ]}
           >
             {headerRight}
-          </View>
+          </Animated.View>
         )}
-      </View>
+      </Animated.View>
 
       {!noBottomBorder && (
         <HeaderBottomBorder
@@ -118,7 +123,7 @@ const Header: React.FC<HeaderProps> = ({
           borderWidth={borderWidth}
         />
       )}
-    </View>
+    </Animated.View>
   );
 };
 

src/components/headers/LargeHeader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
 import type { LargeHeaderProps } from './types';
 
 const LH_VERTICAL_PADDING = 6;
@@ -13,7 +14,7 @@ const LH_HORIZONTAL_PADDING = 12;
 const LargeHeader: React.FC<React.PropsWithChildren<LargeHeaderProps>> = ({
   headerStyle,
   children,
-}) => <View style={[styles.headerContainer, headerStyle]}>{children}</View>;
+}) => <Animated.View style={[styles.headerContainer, headerStyle]}>{children}</Animated.View>;
 
 export default LargeHeader;