question-mark
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.

Warnings when used with Animated.createAnimatedComponent

See original GitHub issue

Getting a warning when using svg components created with createAnimatedComponent.

Related code in react-native: https://github.com/facebook/react-native/blob/master/Libraries/Animated/createAnimatedComponent.js#L230

Repro:

import { Animated } from "react-native";
import { Circle } from "react-native-svg";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

Then put circle anywhere:

<AnimatedCircle />

And here is the warning:

index.js:1 Warning: Received `false` for a non-boolean attribute `collapsable`.

If you want to write it to the DOM, pass a string instead: collapsable="false" or collapsable={value.toString()}.

If you used to conditionally omit it with collapsable={condition && value}, pass collapsable={condition ? value : undefined} instead.
    in circle (created by Circle)
    in Circle (created by AnimatedComponent)
    in AnimatedComponent (created by ForwardRef(AnimatedComponentWrapper))
    in ForwardRef(AnimatedComponentWrapper) (at CircularProgress.tsx:52)
...

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:7
  • Comments:7

github_iconTop GitHub Comments

2reactions
patrickmlcommented, Dec 3, 2020

I am seeing this too with react native web

1reaction
Jose4ggcommented, Apr 5, 2022

Is there any ETA on this update?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Warnings when used with Animated.createAnimatedComponent
Getting a warning when using svg components created with createAnimatedComponent. ... And here is the warning: index.js:1 Warning: Received `false ...
Read more >
Warnings when used with Animated.createAnimatedComponent
Getting a warning when using svg components created with createAnimatedComponent. Related code in react-native:
Read more >
How to use the react-native-reanimated ... - Snyk
To help you get started, we've selected a few react-native-reanimated.createAnimatedComponent examples, based on popular ways it is used in public projects.
Read more >
Warning: Functions are not valid as a React child While ...
ERROR MESSAGE Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render....
Read more >
please update the following components: animatedcomponent - You ...
I use animation with React and I get this warning on the console: ... (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found