Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animated.createAnimatedComponent(Stop) throws error

See original GitHub issue

Bug

import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg';
const AnimatedStop = Animated.createAnimatedComponent(Stop);

throws

ERROR  Invariant Violation: Unable to locate attached view in the native tree

This error is located at:
    in PathIcon (at DepositWithdraw.tsx:18)

Unexpected behavior

“react-native-svg”: “12.2.0”, “react-native”: “0.66.4”,

Environment info

System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 240.96 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8092744
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.14 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Simulator Screen Shot - iPhone 13 - 2022-02-15 at 16 35 44

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

Titozzzcommented, Sep 11, 2022

I can confirm it’s possible to animate the native gradient prop directly on LinearGradient. Thanks @WoLewicki for the idea, works great.

0reactions

lachlanmcbridecommented, Nov 1, 2022

I can confirm it’s possible to animate the native gradient prop directly on LinearGradient. Thanks @WoLewicki for the idea, works great.

Do you have an example of how to extract the values onto RNSVGLinearGradient? I’m unable to get this to work.

Top Results From Across the Web

Animated.createAnimatedComponent(Stop) throws error #1695

createAnimatedComponent(Stop); throws ERROR Invariant Violation: Unable to locate attached view in the native tree This error is ...

Why am I getting Type error in React Native Typescript ...

I am trying to replicate an animation by William Candillon in React Native which uses React Native SVG - Path & React Native...

Animations - React Native

Animations are very important to create a great user experience. ... Objects in motion have momentum and rarely come to a stop immediately....

How to use the react-native-reanimated.cond function ... - Snyk

greaterThan(Animated.multiply(-1, headerOffsetY), scrollOffsetY), Animated.call([headerOffsetY], ([y]) => { if (!flatListRef.current) { throw new Error( ...

react native reanimated not working - You.com | The search engine ...

So I think you missed the Getting Started section. ... Use react-native Animated for web to test and swap it for reanimated later...