Interrupting Animations causes "Warning: useInsertionEffect must not schedule updates"

[InkAndSteel]

Description

Since the react native 0.79.5 upgrade, interrupting animations causes warnings in the console that "useInsertionEffect must not schedule updates"

Steps to reproduce

1. Start the animation
2. Interrupt it before it is done

React Native Version

0.79.5

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.5
  CPU: (12) arm64 Apple M3 Pro
  Memory: 583.00 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/niclascollmer/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12169540
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.8
    path: /Users/niclascollmer/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 3.3.4
    path: /Users/niclascollmer/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.5
    wanted: 0.79.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.80.2 is now available (your project is running on v0.79.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.80.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.79.5&to=0.80.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

ERROR  Warning: useInsertionEffect must not schedule updates.

132 | const SkinareaSelectionSlider: React.FC<Props> = ({
133 |   skinAreaSelectedForCamera,
134 |   tappedOnSkinArea,
135 |   tapOnAddNewPart,

MANDATORY Reproducer

https://github.com/InkAndSteel/animation-error

Screenshots and Videos

No response

[cipolleschi]

@InkAndSteel thanks for the issue. Can you double check that this happens also on Android?
Are you using the New Arch? if yes, can you check whether it happens with the Legacy Arch as well?

[InkAndSteel]

HI @cipolleschi,

Thanks for your fast response. I am using the new arch, my original project is an expo project and the issue occured after upgrading to expo53, which has the new arch enabled by default.

I will check both android and the legacy arch and get back to you soon

[Tejasp2003]

Same issue i got.. On android, working with "expo": "~53.0.20",

[InkAndSteel]

@cipolleschi So I can confirm that the issue also exists on Android. The issue also shows up, when I disable the new architecture

[zahid502]

I’m also getting same issue in react-native 0.79.5

[louie-succio]

I'm getting this as well, react-native 0.79.5 and expo 53.0.20. New arch is disabled.

[Sagar911-rn]

Same , react native 0.79.5, new arch disabled.

Animated.timing(animation, {
toValue: 0,
duration: 200,
useNativeDriver: true,
})
.start(() => setIsOpen(false));

this state update causing this warning idk if this is good but temp. did this ,
imo better to go with reanimated;

Animated.timing(animation, {
toValue: 0,
duration: 200,
useNativeDriver: true,
}).start();
setTimeout(() => setIsOpen(false), 200);

[muhammadashfaq]

Hi @cipolleschi @cortinico

For me it's happening for both iOS and Android.

System:
  OS: macOS 15.6
  CPU: (12) arm64 Apple M3 Pro
  Memory: 131.16 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: ~/.nvm/versions/node/v20.9.0/bin/node
  Yarn:
    version: 4.9.2
    path: ~/.nvm/versions/node/v20.9.0/bin/yarn
  npm:
    version: 10.1.0
    path: ~/.nvm/versions/node/v20.9.0/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/direct-mbp04/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 34.0.0
      - 35.0.0
    System Images:
      - android-29 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.21829.142.2421.12409432
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.6
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/direct-mbp04/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.3
    wanted: 0.79.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[rpc1910]

Any updates on it? I'm getting the same issue using React Native 0.79.5 and Expo 53.0.20

[wangmiJM]

Any updates on it? I'm getting the same issue using React Native 0.79.4 and Expo 53.0.12

[jupier]

Any updates here? We're experiencing the same error with React Native 0.79.5 and Expo 53.0.22.

[mvritz]

I'm also experiencing this issue 🙏
any updates?