search

ethantran / react-native-examples

UI examples from pttrns.com converted to React Native. Examples of SVG Animation with react-native-svg, flubber, d3
325 stars 59 forks source link

what should be I fill in `fillOpacity`? #7

Closed chenzhutian closed 6 years ago

chenzhutian commented 6 years ago

According to the article, I should fill the string type in the fillOpacity. image However, I get this error: image

But if I change the ouput value to number type, image it shows me another value says NSNumber cannot be converted to NSString. image

So what should I do to fix this issue?

ethantran commented 6 years ago

Hey. Did you do toString() to the value in setNativeProps? For some reason, strokeWidth, strokeOpacity, and fillOpacity require that. You should have something that looks like https://github.com/ethantran/react-native-examples/blob/0497ec4475c16e967a6189558b19eba8ecea0526/src/components/AnimatedSvgPropStringFix.js#L15-L24

chenzhutian commented 6 years ago

Yes I do. Actually I copy the code and directly use the component from you, https://github.com/ethantran/react-native-examples/blob/master/src/components/AnimatedSvgCircle.js

BTW, thanks for your great job.

ethantran commented 6 years ago

Oh thanks I see a bug, try changing propKeys to this.propKeys on line 16. That should fix it, but I can't test right now to make sure.

chenzhutian commented 6 years ago

I think that's the bug. I will test soon. Thanks for your reply. Close this issue.

ethantran commented 6 years ago

Never mind, that is not a bug. I am not sure why it doesn't work. Take a look at SvgBrushAnimation.js for an example on how to use fillOpacity. I've updated the example with circle and it works. https://github.com/ethantran/react-native-examples/blob/master/src/screens/SvgBrushAnimation.js