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

[Willham12]

Description

You attempted to set the key current with the value undefined on an object that is meant to be immutable and has been frozen.

Steps to reproduce

12552a3#r166187522

Snack or a link to a repository

12552a3#r166187522

Reanimated version

4.1.2

Worklets version

0.6.0

React Native version

0.82.0-rc4

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

No response

Device

No response

Host machine

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Willham12]

@piaskowyk please take a look at this issue.

[patrycjakalinska]

hi @Willham12, will it be possible to nevertheless provide more simpified, minimal repro of your problem? We'll be grateful and it will make fixing your issue possible, as without repro we can only guess, thanks!

[Willham12]

As i mentioned, it's only reproducible in my production code but it's like this:

import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, {
  interpolate,
  SharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';
import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';
import { FC, memo, useCallback, useRef } from 'react';
import {
  DrawerKeyboardDismissMode,
  DrawerLayoutMethods,
  DrawerLockMode,
  DrawerPosition,
  DrawerType,
} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

type Props = {
  progressAnimatedValue: SharedValue<number>;
};

export const Menu: FC<Props> = memo(({ progressAnimatedValue }) => {
  const animatedStyle = useAnimatedStyle(
    () => ({
      opacity: progressAnimatedValue.value,
      transform: [
        {
          translateX: interpolate(
            progressAnimatedValue.value,
            [0, 1],
            [-100, 0]
          ),
        },
      ],
    }),
    [progressAnimatedValue]
  );

  return (
    <Animated.View style={[styles.container, animatedStyle]}>
      <Text>Menu</Text>
    </Animated.View>
  );
});

function AppContent() {
  const drawerLayoutRef = useRef<DrawerLayoutMethods>(null);

  const renderNavigationView = useCallback(
    (progressAnimatedValue: SharedValue<number>) => (
      <Menu progressAnimatedValue={progressAnimatedValue} />
    ),
    []
  );

  return (
    <GestureHandlerRootView>
      <View style={styles.container}>
        <ReanimatedDrawerLayout
          ref={drawerLayoutRef}
          animationSpeed={0.05}
          drawerBackgroundColor={'red'}
          renderNavigationView={renderNavigationView}
          drawerPosition={DrawerPosition.LEFT}
          drawerLockMode={DrawerLockMode.UNLOCKED}
          keyboardDismissMode={DrawerKeyboardDismissMode.ON_DRAG}
          drawerType={DrawerType.BACK}
          edgeWidth={11}
          minSwipeDistance={3}
          hideStatusBar={false}
          overlayColor={'green'}>
          {(progressAnimatedValue: SharedValue<number> | undefined) => {
            if (!progressAnimatedValue) {
              return (
                <View>
                  <Text>progressAnimatedValue undefined</Text>
                </View>
              );
            }
            return (
              <View>
                <Text>progressAnimatedValue not null</Text>
              </View>
            );
          }}
        </ReanimatedDrawerLayout>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

[arnabJ]

I am facing the same error but with this code:

function FakeCaret() {
  const tintColor = useThemeColor({}, "tint");

  const opacity = useSharedValue(1); 

  useEffect(() => {
    opacity.value = withRepeat(
      withSequence(
        withTiming(0, { duration: 500 }),
        withTiming(1, { duration: 500 })
      ),
      -1,
      true
    );
  }, [opacity]);

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

  const baseStyle = {
    width: 2,
    height: 28,
    backgroundColor: tintColor,
    borderRadius: 1,
  };

  return (
    <View className="absolute w-full h-full items-center justify-center">
      <Animated.View style={[baseStyle, animatedStyle]} />
    </View>
  );
}

The error occurs when I click on the OTP Input.

Screenshot

[patrycjakalinska]

hi @Willham12, I've launched your code in dev and relese mode on ios, on Reanimated 4.1.2 and RN 0.82-rc0 and it appears to work. Not sure what causes the problem, maybe try adding null to ref type, cause you are passing it here const drawerLayoutRef = useRef<DrawerLayoutMethods | null>(null);?

no_error.mov

regarding your issue @arnabJ I've launched your example on the same versions of Reanimated and RN, and also there was no problem from the Reanimated side. Keep in mind that I only used your code provided, which had no OTP Input that you mentioned. Please also check your types, or whole strucutre.

Screen.Recording.2025-09-26.at.15.31.20.mov

If the issue will still persist, try to provide the code - preferably on https://snack.expo.dev/ - that will reproduce the issue.

Thanks!

[Willham12]

This is my style:

		const animatedStyle = useAnimatedStyle(
			() => ({
				opacity: progressAnimatedValue.value,
				transform: [
					{
						translateX: interpolate(progressAnimatedValue.value, [0, 1], [-100, 0]),
					},
				],
			}),
			[progressAnimatedValue]
		);

here an extra log inside useAnimtedStyle.ts

        if (animatedUpdaterData.current) {
            console.log(
                'frozen?', Object.isFrozen(animatedUpdaterData.current),
                'styleUpdaterContainer frozen?', Object.isFrozen(animatedUpdaterData.current.styleUpdaterContainer)
            );
            animatedUpdaterData.current.styleUpdaterContainer.current = fun;
        }

frozen? false
styleUpdaterContainer frozen? true

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.
    at throwOnImmutableMutation (deepFreezeAndThrowOnMutationInDev.js:78:14)
    at anonymous (useAnimatedStyle.ts:579:63)
    at react_stack_bottom_frame (ReactFabric-dev.js:15977:26)
    at runWithFiberInDEV (ReactFabric-dev.js:683:21)
    at commitHookEffectListMount (ReactFabric-dev.js:9659:46)
    at commitHookPassiveMountEffects (ReactFabric-dev.js:9780:36)
    at reconnectPassiveEffects (ReactFabric-dev.js:11093:40)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11149:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    at reconnectPassiveEffects (ReactFabric-dev.js:11086:53)
    at recursivelyTraverseReconnectPassiveEffects (ReactFabric-dev.js:11065:32)
    ... skipping 263 frames

@patrycjakalinska i can't provide a example for reproduction. Before #12552a348092070efc93727b3e3d03d252176e15 i have no issue.

[Willham12]

Here is a fix @patrycjakalinska

https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/src/hook/useAnimatedStyle.ts#L524

        if (animatedUpdaterData.current?.styleUpdaterContainer?.current) {
            animatedUpdaterData.current.styleUpdaterContainer.current = fun;
        }

[denismart]

The same problem on android.

const animatedBorderStyle = useAnimatedStyle(() => {
  return { opacity: 0.5 };
});

<Input
  style={animatedBorderStyle}
/>

[JonathanStevanka143]

having the same issue