stickyHeaderIndices with an animated stickyHeader throws an error

[lededje]

Description

On iOS, when using a ScrollView with stickyHeaderIndices, where the sticky header is an Animated.View with an animation passed to it's style prop an error is thrown. Removing stickyHeaderIndices={[0]} or removing style={stickyHeaderStyle} will cause it to render fine but without the sticky header or the animation value set depending.

Running on iOS Simulator or device running Expo Go 54.0.0 running Snack:

The animated values silently fail. Try reducing the opacity value to 0 and observe the sticky header is still visible.

Running on iOS Simulator or device running Expo Go 54.0.0 running project locally throws an error with the following stack trace:

 ERROR  [Error: You attempted to set the key `current` with the value `undefined` on an object that is meant to be immutable and has been frozen.] 

Code: deepFreezeAndThrowOnMutationInDev.js
  74 |  * LTI update could not be added via codemod */
  75 | function throwOnImmutableMutation(key: empty, value) {
> 76 |   throw Error(
     |              ^
  77 |     'You attempted to set the key `' +
  78 |       key +
  79 |       '` with the value `' +
Call Stack
  throwOnImmutableMutation (node_modules/react-native/Libraries/Utilities/deepFreezeAndThrowOnMutationInDev.js:76:14)
  useEffect$argument_0 (node_modules/react-native-reanimated/src/hook/useAnimatedStyle.ts:574:64)
  callCreate.reactStackBottomFrame (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:15973:26)
  
  ... Fabric error stack elided for brevity.

Code: useScreens.js
  211 |         return (<Route_1.Route node={value} route={route}>
  212 |         <react_1.default.Suspense fallback={<SuspenseFallback_1.SuspenseFallback route={value}/>}>
> 213 |           <ScreenComponent {...props} 
      |           ^
  214 |         // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
  215 |         // the intention is to make it possible to deduce shared routes.
  216 |         segment={value.route}/>
Call Stack
  BaseRoute (node_modules/expo-router/build/useScreens.js:213:11)
  SceneView (node_modules/@react-navigation/core/lib/module/SceneView.js:133:70)
  render (node_modules/@react-navigation/core/lib/module/useDescriptors.js:109:36)
  routes.reduce$argument_0 (node_modules/@react-navigation/core/lib/module/useDescriptors.js:143:27)
  reduce (<native>)
  useDescriptors (node_modules/@react-navigation/core/lib/module/useDescriptors.js:140:36)
  useNavigationBuilder (node_modules/@react-navigation/core/lib/module/useNavigationBuilder.js:460:21)
  Content (node_modules/expo-router/build/ExpoRoot.js:164:88)
  ContextNavigator (node_modules/expo-router/build/ExpoRoot.js:149:15)
  ExpoRoot (node_modules/expo-router/build/ExpoRoot.js:88:12)
  App (node_modules/expo-router/build/qualified-entry.js:21:7)
  WithDevTools (node_modules/expo/src/launch/withDevTools.ios.tsx:32:11)

Steps to reproduce

For Snack:

1. Open Snack on iOS
2. Observe the header at full opacity
3. Reduce the opacity shared value to 0
4. Observe the header still at full opacity

For local dev:

1. npx create-expo-app@latest sticky-header-issue
2. cd !$
3. Copy paste the app.js code from the snack into app/_layout.tsx
4. yarn start and run on device or emulator
5. Observe error

Snack or a link to a repository

https://snack.expo.dev/@lededje/great-violet-apple

Reanimated version

4.1.0

Worklets version

0.5.1

React Native version

0.81.4

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Go

Architecture

New Architecture (Fabric renderer)

Build type

Debug app & dev bundle

Device

iOS simulator, Real device

Host machine

macOS

Device model

iPhone 14 Pro, iOS 26

Acknowledgements

Yes

[wmarcelino]

I’ve encountered the same issue as well.

 const animatedStyle = useAnimatedStyle(() => {
    return { opacity: sharedOpacity.value };
  });
...

  <Animated.ScrollView
      ref={ref}
     ...
      contentContainerStyle={[
        animatedStyle,
      ]}
      {...otherProps}
    >
      {children}
    </Animated.ScrollView>

It fails with ERROR [Error: You attempted to set the key current with the value undefined on an object that is meant to be immutable and has been frozen.]