73r3wy / react-native-svg-animations Goto Github PK
View Code? Open in Web Editor NEWSVG Animations wrapper for react-native.
License: MIT License
SVG Animations wrapper for react-native.
License: MIT License
Hi team,
I'm having a weird error with AnimiatedSVGPath at line 55. It took some effort but seems like my set up is complaining that I'm trying to treat svgPathProperties as a function when it's a class. I assume it has to do with the way my env is set up. I'm using Expo Managed with Typescript (not bare) Below is my package.json typescript expo and babel config. Anyone able to help me figure what about my set up is causing the error? Or maybe do a pull request to use
new svgPathProperties(d)
instead.
Thanks
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-native-fontawesome": "^0.2.5",
"@react-native-community/masked-view": "0.1.6",
"@react-navigation/native": "^5.4.0",
"@react-navigation/stack": "^5.3.7",
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-flip-card": "^3.5.6",
"react-native-gesture-handler": "~1.6.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-snap-carousel": "^3.9.0",
"react-native-svg": "11.0.1",
"react-native-svg-animations": "^0.2.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-swiper": "^1.6.0",
"react-native-web": "~0.11.7",
"svg-path-properties": "^1.0.4"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@types/react": "~16.9.23",
"@types/react-native": "~0.61.17",
"@types/react-native-snap-carousel": "^3.8.1",
"babel-preset-expo": "~8.1.0",
"typescript": "~3.8.3"
},
"private": true
}
typescrpt
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
}
}
babel
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
expo config
{
"expo": {
"name": "flashcards",
"slug": "flashcards",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"description": "AWS training flashcard"
}
}
In the file https://github.com/73R3WY/react-native-svg-animations/blob/master/utils/AnimatedSVGBrush/index.js
you have componentWillReceiveProps. Could you please change the method or the logic to a relevant.
I have a loading animation in a react-native app that uses react-native-svg-animations- when the app starts up, 50% of the time it will crash with the following.
(full log: https://pastebin.com/raw/ZKCqb1uZ)
09-17 16:08:17.266 18634 18634 F libc : Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 18634 (app.local), pid 18634 (app.local)
...
09-17 16:08:17.480 18724 18724 F DEBUG : *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
09-17 16:08:17.480 18724 18724 F DEBUG : Build fingerprint: 'google/sdk_gphone64_arm64/emulator64_arm64:12/SPB4.210715.011/7608474:userdebug/dev-keys'
09-17 16:08:17.480 18724 18724 F DEBUG : Revision: '0'
09-17 16:08:17.480 18724 18724 F DEBUG : ABI: 'arm64'
09-17 16:08:17.480 18724 18724 F DEBUG : Timestamp: 2021-09-17 16:08:17.295574111+1000
09-17 16:08:17.480 18724 18724 F DEBUG : Process uptime: 0s
09-17 16:08:17.480 18724 18724 F DEBUG : Cmdline: com.theapplication.local
09-17 16:08:17.480 18724 18724 F DEBUG : pid: 18634, tid: 18634, name: app.local >>> com.theapplication.local <<<
09-17 16:08:17.480 18724 18724 F DEBUG : uid: 10164
09-17 16:08:17.480 18724 18724 F DEBUG : tagged_addr_ctrl: 0000000000000001
09-17 16:08:17.480 18724 18724 F DEBUG : signal 6 (SIGABRT), code -1 (SI_QUEUE), fault addr --------
09-17 16:08:17.480 18724 18724 F DEBUG : x0 0000000000000000 x1 00000000000048ca x2 0000000000000006 x3 0000007ffb981330
09-17 16:08:17.480 18724 18724 F DEBUG : x4 fefeff031e949b0a x5 fefeff031e949b0a x6 fefeff031e949b0a x7 7f7f7f7f7fffff7f
09-17 16:08:17.480 18724 18724 F DEBUG : x8 00000000000000f0 x9 54610b7cbc1c1300 x10 0000000000000000 x11 ffffff80fffffbdf
09-17 16:08:17.480 18724 18724 F DEBUG : x12 0000000000000001 x13 0000000000000001 x14 ffffffffffffffff x15 00000000ebad607f
09-17 16:08:17.480 18724 18724 F DEBUG : x16 00000071cf9a3050 x17 00000071cf97ff80 x18 00000071df940000 x19 00000000000048ca
09-17 16:08:17.480 18724 18724 F DEBUG : x20 00000000000048ca x21 00000000ffffffff x22 0000006e898373a8 x23 00000071df129000
09-17 16:08:17.480 18724 18724 F DEBUG : x24 0000000000000000 x25 0000000000000004 x26 b40000700a388808 x27 0000006e89b9bc08
09-17 16:08:17.480 18724 18724 F DEBUG : x28 b4000070ca0a4338 x29 0000007ffb9813b0
09-17 16:08:17.480 18724 18724 F DEBUG : lr 00000071cf932c3c sp 0000007ffb981310 pc 00000071cf932c68 pst 0000000000001000
09-17 16:08:17.480 18724 18724 F DEBUG : backtrace:
09-17 16:08:17.480 18724 18724 F DEBUG : #00 pc 000000000004fc68 /apex/com.android.runtime/lib64/bionic/libc.so (abort+164) (BuildId: 16a146efb5b048d744b674e300d5bcaf)
09-17 16:08:17.480 18724 18724 F DEBUG : #01 pc 00000000000b8124 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libc++_shared.so (BuildId: 6de1c39a010a6596b5bb6546e6fe55445b037c1b)
09-17 16:08:17.480 18724 18724 F DEBUG : #02 pc 00000000000b43d4 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libc++_shared.so (__gxx_personality_v0+364) (BuildId: 6de1c39a010a6596b5bb6546e6fe55445b037c1b)
09-17 16:08:17.480 18724 18724 F DEBUG : #03 pc 000000000001ca94 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libglog.so (BuildId: e66424a8f9b845a640b312b47e615a4a7e2e8f9e)
09-17 16:08:17.480 18724 18724 F DEBUG : #04 pc 000000000001cf9c /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libglog.so (_Unwind_Resume+116) (BuildId: e66424a8f9b845a640b312b47e615a4a7e2e8f9e)
09-17 16:08:17.480 18724 18724 F DEBUG : #05 pc 000000000016504c /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libreanimated.so (BuildId: 3fb477141bc43d845688e6287afa78528635923c)
09-17 16:08:17.480 18724 18724 F DEBUG : #06 pc 0000000000164f70 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libreanimated.so (BuildId: 3fb477141bc43d845688e6287afa78528635923c)
09-17 16:08:17.480 18724 18724 F DEBUG : #07 pc 0000000000164eac /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libreanimated.so (BuildId: 3fb477141bc43d845688e6287afa78528635923c)
09-17 16:08:17.480 18724 18724 F DEBUG : #08 pc 0000000000164e08 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libreanimated.so (BuildId: 3fb477141bc43d845688e6287afa78528635923c)
09-17 16:08:17.480 18724 18724 F DEBUG : #09 pc 0000000000163db8 /data/app/~~ST_ANWPgbzhK1sTUZ09FaA==/com.theapplication.local-HCUPJNKipyCyt-XcVxYFuA==/lib/arm64/libreanimated.so (BuildId: 3fb477141bc43d845688e6287afa78528635923c)
Not sure if this is an unwanted interaction with reanimated-v2 given the above- where could i start looking to troubleshoot this? If i comment out the AnimatedSvgPath, the crash goes away, with it in, the crash happens maybe 50% of the time.
react-native 0.64.2
react-native-svg 12.1.1
react-native-svg-animations 0.2.6
react-native-reanimated 2.2.0
Running on emulator on API 31
Hi there,
Can't working with below data:
'M10 -20 L17 -21.002236633278763 L24 -22.004473266557525 L31 -23.006709899836288 L38 -24.00894653311505 L45 -25.011183166393813 L52 -26.013419799672576 L59 -27.01565643295134 L66 -28.0178930662301 L73 -29.020129699508864 L80 -30.02236633278763 L87 -31.024602966066393 L94 -32.02683959934515 L101 -33.02907623262392 L108 -34.03131286590268 L115 -35.03354949918145 L122 -36.0357861324602 L129 -37.03802276573897 L136 -38.04025939901773 L143 -39.0424960322965 L150 -40.04473266557526 L157 -41.04696929885402 L164 -42.049205932132786 L171 -43.05144256541155 L178 -44.05367919869031 L185 -45.055915831969074 L192 -46.05815246524784 L199 -47.0603890985266 L206 -48.06262573180536 L213 -49.064862365084124 L220 -50.06709899836289 L227 -48.27264441830893 L234 -46.47818983825496 L241 -44.683735258201004 L248 -42.889280678147045 L255 -41.09482609809308 L262 -39.30037151803912 L269 -37.50591693798516 L276 -35.7114623579312 L283 -33.91700777787724 L290 -32.12255319782328 L297 -30.328098617769314 L304 -28.533644037715355 L311 -26.739189457661393 L318 -24.94473487760743 L325 -23.150280297553472'
Can you help me?
Thank you
Is there way we can define the starting point of animation, like i want my animation to be sync with a time (minute),
like if timer is on 30 second, then animation start from 50% of its path,animate as my timer moved and stop as my timer stop
is this possible?
I receive this issue upon importing this in to my project.
"react-native": "0.55.4",
"react-native-svg": "^6.4.1",
"react-native-svg-animations": "^0.1.6",
Hi, great package, was really easy to setup.
Just wondering if there is a feature built in to turn the loop off, so the animation only occurs once and then is static?
strokeLinecap is a prop already in react-native-svg. It basically gives you the option to make the stroke endpoint rounded if you want. Is this feature possible? Thanks.
Hi there,
I am using create-react-native-app CLI. Versions are:
expo: 27.0.1
react: 16.3.1
react-native: ~0.55.2
react-native-svg-animations: 0.1.6
I started a fresh project and added this package.
In App.js - import AnimatedSVGPath from 'react-native-svg-animations' and then copy the single path example from your repo exactly.
I get the following error:
"Error while updating property 'strokeWidth' in shadow node of type: RNSVGPath
java.land.Double cannot be cast to java.lang.String"
UpdateShadoeNodeProp
ViewManagersPropertyCache.java:113
setProperty
viewManagerPropertyUpdater.java:58
updateProperties
ReactShadowNodeImpl.java:378
createView
UIImplementation.java:289
createView
UIManagerModule.java:366
invoke
Method.java
invoke
JavaMethodWrapper.java:372
invoke
JavaModuleWrapper.java:160
run
NativeRunnable.java
handleCallback
Handler.java:751
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:29
loop
Looper.java:154
run
MessageQueueThreadImpl.java:192
run
Thread.java:762
I'm trying to find a way to add in a marker to the end of the animated path. Can this be done? If this is not implemented, do you have a suggestion as to how I could go about this? I am using the animated path to show a user's journey, and wanted to have a blinking circle to indicate their position at the front of the path.
An example of what I'm talking about can be seen here with the dog at the front of the path
https://saschwarz.github.io/react-svgpathplayer/
That library has not been updated in 4 years, so I was hoping there was a way to achieve this with this library?
Hi there,
I had used this to create an svg animation and it worked in the past. Just using the default files and d.js (the content to test).
But after reinstall all plugins, I am getting a TypeError:
TypeError: t is not an Object. (evaluating 'e in t')
I have been trying to figure out why it is happening, but could not.
Using:
"react-native-reanimated": "^1.7.0",
"svg-path-properties": "^1.0.2",
"react-native-svg": "^11.0.1",
"react-native-svg-animations": "^0.1.9",
Did someone else encountered a same issue?
Example:
There is an animation at 4 points (A, B, C, D).
As I've seen it work now, we are able to animate from A -> B -> C -> D then the svg disappears and it starts over. Would there be a way for us to set a prop to have the svg show the animation like:
A
A -> B
A -> B -> C
A -> B -> C -> D
B -> C -> D
C -> D
D
So essentially it is sort of "clear itself" instead of a sudden clear.
In the release 0.2.3 error raises:
Can not find variable rewind
. At the line:
Reproduced on iPhone 6 real device.
seems rewind
was not extracted from props
I used you example in 'react-native-svg-animations/examples/IngenuityPreloaderSVG'
import Example from 'react-native-svg-animations/examples/IngenuityPreloaderSVG'
Hi there,
How can the fill be applied after the drawing is complete. Or is this not possible?
Would be awesome to have this.
Cheers,
Stephan
Hi there,
First of all, thanks for a such nice library, it makes SVG animations a lot easier than doing it ourselves.
I have an SVG with a bunch of Paths that I would like to be animated sequentially in a controlled manner (e.g. providing a callback function once the path animated completed).
I hope you can look at this soon.
Title pretty much says it. This seems like a great library, but lots of animations need cubic bezier easing... would it be possible to add that sort of functionality?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.