fix: improve reanimated 4 compatibility changes

- FadingView: restore external animatedProps support instead of silently
  discarding them; use fallback to internal pointerEvents props when no
  external props are provided
- Header: scope Animated.View usage to only the inner container that
  receives headerStyle; revert outermost wrapper and non-fading
  left/center/right containers back to plain View
- Types: widen headerStyle on HeaderProps and LargeHeaderProps to accept
  AnimatedStyle for proper type-safety with Animated.View

Author: e-younan

example/ios/Podfile.lock

@@ -2502,24 +2502,24 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  EXConstants: 0246c66e19d755cd9c88504d5c69896bba41d8a6
+  EXConstants: 7e4654405af367ff908c863fe77a8a22d60bd37d
   EXJSONUtils: 1d3e4590438c3ee593684186007028a14b3686cd
-  EXManifests: 7469efed75d694ce3c43a6da9c6f3886f66d3c26
-  Expo: 24f225a64acfd5fb3d9949f2d02a3cceb2d4620b
-  expo-dev-client: b0363ce1f16a248d7c9b67ceaee2dbee058c1e05
-  expo-dev-launcher: 903b23df8c217bfad6d3692fec0368074eb22dc0
-  expo-dev-menu: e5b5cfce6ef9f4559d7c2f7cb928afb4810dfabf
+  EXManifests: 224345a575fca389073c416297b6348163f28d1a
+  Expo: 170291b86adbf5fe95d36bc7a90288203cec739e
+  expo-dev-client: f3434d6ca09ecb14ae48c2a3912bdbb07464cc85
+  expo-dev-launcher: b9538b1e0dc3fd2ddad75017b6ee9c8dfb206925
+  expo-dev-menu: 8f868d1bab6d673d59e5a08ca610056b290dd555
   expo-dev-menu-interface: 600df12ea01efecdd822daaf13cc0ac091775533
-  ExpoAsset: 4375a46b45b12bbfcf6efac8c8a33aebdb8ba12b
-  ExpoBlur: b5b7a26572b3c33a11f0b2aa2f95c17c4c393b76
-  ExpoCrypto: 4c50a152f5939e16a2ca10be77b002a3a391c4d3
-  ExpoFileSystem: adffad7d1f57f768ca7a5e3bf450312fb9ebd27a
-  ExpoFont: d3e56c7cc03d9fd113b90a5513ad32b4bf46b0ff
-  ExpoImage: 306dd755c842dba9f3ee654c51834a9cc657e6ca
-  ExpoKeepAwake: 3f5e3ac53627849174f3603271df8e08f174ed4a
-  ExpoModulesCore: c91f6219ddb4386f73fa4650bc66dc51224c28a9
-  ExpoSplashScreen: 9d2ff8fa08f2c00336a83f93bebffed3a8312519
-  EXUpdatesInterface: 1436757deb0d574b84bba063bd024c315e0ec08b
+  ExpoAsset: 84810d6fed8179f04d4a7a4a6b37028bbd726e26
+  ExpoBlur: 2dd8f64aa31f5d405652c21d3deb2d2588b1852f
+  ExpoCrypto: c1fbce112d1b6b79652bbe380b4fd4cc91676595
+  ExpoFileSystem: 4fb06865906e781329eb67166bd64fc4749c3019
+  ExpoFont: 86ceec09ffed1c99cfee36ceb79ba149074901b5
+  ExpoImage: e88f500585913969b930e13a4be47277eb7c6de8
+  ExpoKeepAwake: 1a2e820692e933c94a565ec3fbbe38ac31658ffe
+  ExpoModulesCore: 9281d8f1cda9d0c37dbce34c26014212b22eb8c0
+  ExpoSplashScreen: cbb839de72110dea1851dd3e85080b7923af2540
+  EXUpdatesInterface: 5adf50cb41e079c861da6d9b4b954c3db9a50734
   FBLazyVector: 9e0cd874afd81d9a4d36679daca991b58b260d42
   hermes-engine: 35c763d57c9832d0eef764316ca1c4d043581394
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7
@@ -2530,75 +2530,75 @@ SPEC CHECKSUMS:
   RCTTypeSafety: d2b07797a79e45d7b19e1cd2f53c79ab419fe217
   React: 2073376f47c71b7e9a0af7535986a77522ce1049
   React-callinvoker: 00fa0972a70df7408a4f088144b67207b157e386
-  React-Core: 7edc3b0763d7a47cf5610b32e0e790ac10dd5410
-  React-Core-prebuilt: ab6d77841d4bb8d247c4358663c6c71836e4f461
-  React-CoreModules: a02474243c3efbdc767b44dc029b452b0476cee1
-  React-cxxreact: b3b6c8c0823ff10237f1c6c1ad067c2577bc2f84
+  React-Core: d375dd308561785c739a621a21802e5e7e047dee
+  React-Core-prebuilt: dde79b89f8863efebb1d532a3335f472927da669
+  React-CoreModules: 3eb9b1410a317987c557afc683cc50099562c91d
+  React-cxxreact: 724210b64158d97f150d8d254a7319e73ef77ee7
   React-debug: c01d176522cf57cdc4a4a66d1974968fcf497f32
-  React-defaultsnativemodule: d8164fe3151fbc98b49580b37bd565da14d9fbfa
-  React-domnativemodule: 848a14d603966ec5b244cbd5e4a4c330ae71abb1
-  React-Fabric: 027d67e708433a3e08e0257dff8f0293afe1b761
-  React-FabricComponents: 378d5c830a42899fb49283d379424f4a6af92265
-  React-FabricImage: a844845a53655c23e05e102f29e5c2a5cdfbaed0
-  React-featureflags: a190badbbda1e72cf7e7accbfbcd2070ab35c431
-  React-featureflagsnativemodule: b0f97eedbbe788c114cf2d0bb5c6b28b55e9b4f9
-  React-graphics: eeef269ea0a459baf20748cbbfc099c6263f6596
-  React-hermes: 3f94c83c8238913c50fdd23e276d64cfc520b08c
-  React-idlecallbacksnativemodule: 7510daba721b4389a2a35fd0a97f5f782bbacbe4
-  React-ImageManager: 13f32b59f5c873df59f05b8102ebc075a1d66c4d
-  React-jserrorhandler: 9a7140314550bec0368898985ca2f0d87cb0744b
-  React-jsi: d987f2b32fdda6c521e750a639ab3b04ab9de44b
-  React-jsiexecutor: 63925b9dc840d26880adc1145dc3ea701a2b06a4
-  React-jsinspector: 7e36f5182f024ee11b7ac60252db9cd3219deefb
-  React-jsinspectorcdp: 7c121234fff135fb6e76534bdbfae1d6e1a05a52
-  React-jsinspectornetwork: c0c040786ea67d3b10aa687460d6b96b51365cc5
-  React-jsinspectortracing: 73f22a1a52a049409326abb93b8d0d2376a2ed37
-  React-jsitooling: f3bb6e50d6d5a1ff581d4ede35722ef760c6b12c
-  React-jsitracing: 008ed6c9a92ba5652a23f86cd853248f7fbb9a22
-  React-logger: 472e292c035c024ac73070cd6cbd011a827136f9
-  React-Mapbuffer: 823a2c0e0d1826c784f808174626d5229f59be17
-  React-microtasksnativemodule: 70cdf4826e52c7bcf98bc55255c3e30b5455d318
-  react-native-safe-area-context: add9b4ba236fe95ec600604d0fc72f395433dd59
-  React-NativeModulesApple: e653919faff1f76eadf02373bda26c085bf348e3
+  React-defaultsnativemodule: 3953ff49013fa997e72586628e1d218fdaf3abdb
+  React-domnativemodule: 540b9c7a8f31b6f4ed449aafd3a272e1f1107089
+  React-Fabric: 00b792be016edad758a63c4ebac15e01d35f6355
+  React-FabricComponents: 16ebdb9245d91ec27985a038d0a6460f499db54e
+  React-FabricImage: 2a967b5f0293c1c49ec883babfd4992d161e3583
+  React-featureflags: 4150b4ddac8210b1e3c538cfb455050b5ee05d8d
+  React-featureflagsnativemodule: ff977040205b96818ac1f884846493cb8a2aca28
+  React-graphics: ec689ac1c13a9ddb1af83baf195264676ecdbeb6
+  React-hermes: ff60a3407f27f3fc82f661774a7ab6559a24ab69
+  React-idlecallbacksnativemodule: 5f5ce3c424941f77da4ac3adba681149e68b1221
+  React-ImageManager: 8d87296a86f9ee290c1d32c68c7be1be63492467
+  React-jserrorhandler: 072756f12136284c86e96c33cdfece4d7286a99f
+  React-jsi: b507852b42a9125dffbf6ae7a33792fb521b29a2
+  React-jsiexecutor: f970eed6debb91fe5d5d6cb5734d39cf86c59896
+  React-jsinspector: 766e113e9482b22971b30236d10c04d8af38269e
+  React-jsinspectorcdp: 5b60350e29fe2566d9ed9799858c04b8e6095a3e
+  React-jsinspectornetwork: b3cc9a20c6b270f792eaaaa14313019a031b327d
+  React-jsinspectortracing: d99120fcf0864209c45cefbc9fc4605c8189c0ef
+  React-jsitooling: 9e41724cc47feadefbede31ca91d70f6ff079656
+  React-jsitracing: ca020d934502de8e02cccf451501434a5e584027
+  React-logger: 7b234de35acb469ce76d6bbb0457f664d6f32f62
+  React-Mapbuffer: fbe1da882a187e5898bdf125e1cc6e603d27ecae
+  React-microtasksnativemodule: 76905804171d8ccbe69329fc84c57eb7934add7f
+  react-native-safe-area-context: 42a1b4f8774b577d03b53de7326e3d5757fe9513
+  React-NativeModulesApple: a9464983ccc0f66f45e93558671f60fc7536e438
   React-oscompat: 73db7dbc80edef36a9d6ed3c6c4e1724ead4236d
-  React-perflogger: f2116e7a0c1562ed7cbcaa2c90e8fdb0bc28df78
-  React-performancetimeline: 6ea21e31c0ccf56cebe26c7110429fe25314ff22
+  React-perflogger: 123272debf907cc423962adafcf4513320e43757
+  React-performancetimeline: 095146e4dc8fa4568e44d7a9debc134f27e103f9
   React-RCTActionSheet: 9fc2a0901af63cefe09c8df95a08c2cf8bb7797b
-  React-RCTAnimation: 3728b2991c073aa629a90df00997b0c6cec54b8e
-  React-RCTAppDelegate: bd7fa41be1461c97e67f63efbee0d46dcc202a8b
-  React-RCTBlob: 4ac65a15788a793a42e4eb8c2f4325146aa3baed
-  React-RCTFabric: 0f3aca011a1448bc027cf65f485ade90f231a6d9
-  React-RCTFBReactNativeSpec: 4838aece65e8710ce8238aefe54b6bc85314e57a
-  React-RCTImage: 9cc8cff72a6aa2b0a94ad8b0c18b97822825eaee
-  React-RCTLinking: fa8aa5a3ed268e364d65f7025f01f94cd9d700a1
-  React-RCTNetwork: 139283847dd0dfa98f44c843a49e8dedc5fc2d99
-  React-RCTRuntime: 5759c5cb10618ce9b1ae1073d689b908879b76ab
-  React-RCTSettings: f101bafea6c0f73bb6cabec765bb7af60eb79e80
-  React-RCTText: b5a219996342e6727dae7f07e6ddcc5377fc32a2
-  React-RCTVibration: 3a04d19e46e19af9cdfd43b9bb17fa244c633100
+  React-RCTAnimation: 785e743e489bc7aec14415dbc15f4f275b2c0276
+  React-RCTAppDelegate: 0602c9e13130edcde4661ea66d11122a3a66f11a
+  React-RCTBlob: ae53b7508a5ced43378de2a88816f63423df1f24
+  React-RCTFabric: 687a0cfb5726adea7fac63560b04410c86d97134
+  React-RCTFBReactNativeSpec: 7c55cf4fb4d2baad32ce3850b8504a6ee22e11ce
+  React-RCTImage: f45474c75cdf1526114f75b27e86d004aa171b90
+  React-RCTLinking: 56622ff97570e15e01dd9b5a657010c756a9e2d8
+  React-RCTNetwork: 3fffa1ab5d6981f839e7679d56f8cb731ba92c07
+  React-RCTRuntime: f38c04f744596fc8e1b4c5f6a57fc05c26955257
+  React-RCTSettings: f4a8e1bd36f58ec8273c73d3deefdcf90143ac6a
+  React-RCTText: da852a51dd1d169b38136a4f4d1eaed35376556b
+  React-RCTVibration: ff92ef336e32e18efff0fa83c798a2dbbebe09bd
   React-rendererconsistency: b83b300e607f4e30478a5c3365e260a760232b04
-  React-renderercss: 10faf35f1b235ee768d84bca40733418669dd8bb
-  React-rendererdebug: af3c8224c58498efdc0c10c3c376b724f8896668
-  React-RuntimeApple: 119f51db881637ffcc6186c73f6a40840fd3bc0e
-  React-RuntimeCore: 2394c9276eb30c7156e9eb93091693ed6864b9a8
-  React-runtimeexecutor: 3b2bed6b77b4016273d354bcb1d6eb2ad5a457a2
-  React-RuntimeHermes: 3148d449c52f1ff987eebbb72ce2ed7542e31b5f
-  React-runtimescheduler: ef67578dc2c5b27ec32b322591d965cef6e8e8a4
-  React-timing: 37d287f84c57ce9186fbb494dbbdb3a272a3ee19
-  React-utils: 3c6c77bb22ce2e5947daf072d49f361a95fd12c6
-  ReactAppDependencyProvider: b20fba6c3d091a393925890009999472c8f94d95
-  ReactCodegen: c7382a9d84b5826fec1441c7eec6e424499bc8c0
-  ReactCommon: b720ccad5e1e8a528746c39b671825fcb7207d3c
+  React-renderercss: aa6a3cdd4fa4e3726123c42b49ba4dd978f81688
+  React-rendererdebug: 6b12a782caf2e7e2f730434264357b7b6aed1781
+  React-RuntimeApple: 8934aab108dcab957a87208fef4b6f1b3a04973a
+  React-RuntimeCore: 1d4345561ecc402e9e88b38e1d9b059a7a13b113
+  React-runtimeexecutor: a9a059f222e4d78f45a4e92cada48a5fde989fb8
+  React-RuntimeHermes: 05b955709a75038d282a9420342d7bea5857768a
+  React-runtimescheduler: 4ce23c9157b51101092537d4171ea4de48a5b863
+  React-timing: 62441edf291b91ab5b96ab8f2f8fb648c063ce6f
+  React-utils: 485abe7eaefa04b20e0ef442593e022563a1419b
+  ReactAppDependencyProvider: 433ddfb4536948630aadd5bd925aff8a632d2fe3
+  ReactCodegen: a15ad48730e9fb2a51a4c9f61fe1ed253dfcf10f
+  ReactCommon: 149b6c05126f2e99f2ed0d3c63539369546f8cae
   ReactNativeDependencies: ed6d1e64802b150399f04f1d5728ec16b437251e
-  RNReanimated: 8b94f06454f503a37be1d8995d8ef41d190962d0
-  RNScreens: dd61bc3a3e6f6901ad833efa411917d44827cf51
-  RNSVG: 2825ee146e0f6a16221e852299943e4cceef4528
-  RNWorklets: 28ee7370ca8da356fcc914e3e68b97e9752196d2
+  RNReanimated: 8d3a14606ad49f022c17d9e12a2d339e9e5ad9b0
+  RNScreens: d8d6f1792f6e7ac12b0190d33d8d390efc0c1845
+  RNSVG: 31d6639663c249b7d5abc9728dde2041eb2a3c34
+  RNWorklets: 76fce72926e28e304afb44f0da23b2d24f2c1fa0
   SDWebImage: 9f177d83116802728e122410fb25ad88f5c7608a
   SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
-  Yoga: c8f1aad5bc3522a8fdab409b5843965abff35aa6
+  Yoga: 051f086b5ccf465ff2ed38a2cf5a558ae01aaaa1
 
 PODFILE CHECKSUM: e9c15200fcd8026258264cd5634413fbafb8f56f
 

src/components/containers/FadingView.tsx

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

src/components/headers/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { FadingView } from '../containers';
@@ -42,7 +42,7 @@ const Header: React.FC<HeaderProps> = ({
   const noHeaderLeftRight = !headerLeft && !headerRight;
 
   return (
-    <Animated.View>
+    <View>
       {SurfaceComponent && SurfaceComponent({ showNavBar })}
 
       <Animated.View
@@ -61,7 +61,7 @@ const Header: React.FC<HeaderProps> = ({
             {headerLeft}
           </FadingView>
         ) : (
-          <Animated.View
+          <View
             style={[
               styles.leftContainer,
               noHeaderLeftRight && styles.noFlex,
@@ -70,7 +70,7 @@ const Header: React.FC<HeaderProps> = ({
             ]}
           >
             {headerLeft}
-          </Animated.View>
+          </View>
         )}
 
         {headerCenter &&
@@ -82,11 +82,9 @@ const Header: React.FC<HeaderProps> = ({
               {headerCenter}
             </FadingView>
           ) : (
-            <Animated.View
-              style={[styles.centerContainer, { width: centerWidth }, headerCenterStyle]}
-            >
+            <View style={[styles.centerContainer, { width: centerWidth }, headerCenterStyle]}>
               {headerCenter}
-            </Animated.View>
+            </View>
           ))}
 
         {headerRightFadesIn ? (
@@ -102,7 +100,7 @@ const Header: React.FC<HeaderProps> = ({
             {headerRight}
           </FadingView>
         ) : (
-          <Animated.View
+          <View
             style={[
               styles.rightContainer,
               noHeaderLeftRight && styles.noFlex,
@@ -111,7 +109,7 @@ const Header: React.FC<HeaderProps> = ({
             ]}
           >
             {headerRight}
-          </Animated.View>
+          </View>
         )}
       </Animated.View>
 
@@ -123,7 +121,7 @@ const Header: React.FC<HeaderProps> = ({
           borderWidth={borderWidth}
         />
       )}
-    </Animated.View>
+    </View>
   );
 };
 

src/components/headers/types.ts

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle } from 'react-native';
-import { SharedValue } from 'react-native-reanimated';
+import { AnimatedStyle, SharedValue } from 'react-native-reanimated';
 
 export interface SurfaceComponentProps {
   /**
@@ -16,12 +16,12 @@ export interface SurfaceComponentProps {
  */
 export interface HeaderProps {
   /**
-   * The style of the root container of the header.
+   * The style of the root container of the header. Supports animated styles.
    *
    * @default undefined
-   * @type {StyleProp<ViewStyle>}
+   * @type {StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>}
    */
-  headerStyle?: StyleProp<ViewStyle>;
+  headerStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
   /**
    * The component to be rendered on the left side of the header. This is usually a back button.
    *
@@ -143,10 +143,10 @@ export interface HeaderProps {
  */
 export interface LargeHeaderProps {
   /**
-   * The style of the root container of the header.
+   * The style of the root container of the header. Supports animated styles.
    *
    * @default undefined
-   * @type {StyleProp<ViewStyle>}
+   * @type {StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>}
    */
-  headerStyle?: StyleProp<ViewStyle>;
+  headerStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
 }