Progress.Circle is not working on Android - -Error while updating property 'stroke' in shadow node of type: ARTShape #179

dogaoz · 2019-11-18T23:19:03Z

This happens when we used Progress.Circle and Progress.CircleSnail
"Error while updating property 'stroke' in shadow node of type: ARTShape

Value for stroke cannot be cast from String to ReadableArray"

Progress.Bar might be working fine since it doesn't cause this error but we don't need the bar version for our app.

jiaozhouzhou · 2019-11-19T10:44:28Z

me too

dogaoz · 2019-11-20T00:16:55Z

me too

I switched back to version 3.5.0. Even 3.6.0 is not working..

sandeepsinghs · 2019-11-21T09:26:57Z

Install this lib and check
https://github.com/react-native-community/art

dogaoz · 2019-11-21T22:52:47Z

Install this lib and check
https://github.com/react-native-community/art

I tried that before opening this issue. It didn't work.

jonnynfb · 2019-11-26T20:44:56Z

Install this lib and check
https://github.com/react-native-community/art

This is working for me, but I hope we don't have to install an extra package.

premhowli · 2019-12-02T15:39:54Z

Not working for me too, same issue running on android.

sszcome · 2019-12-04T02:59:31Z

I fixed this problem, and it working , following is the method

see https://github.com/react-native-community/art readme,
we should migrating from the core react-native module

import {ART} from 'react-native'; const {Surface, Shape} = ART;

to

import {Surface, Shape} from '@react-native-community/art';

so , I override react-native-progress code ,modify import ART from '@react-native-community/art',
like this :
`// import { ART } from 'react-native';

import * as ART from '@react-native-community/art'`,

remember modify all file in react-native-progress;

good luck.

dogaoz · 2019-12-04T19:03:22Z

@sszcome did anyone create a pull request yet?

dkwl93 · 2019-12-05T03:06:27Z

@dogaoz I can have a look at creating a PR tonight

danielwinkler · 2019-12-05T13:03:36Z

I created a PR at #181

dogaoz · 2019-12-18T18:55:04Z

It is finally merged.
Imagine how tired we are lmao

meme below

andreferi3 · 2019-12-19T13:03:37Z

has anyone succeeded to resolve this issue ?

thanks was resolved by update @react-native-community/art to version 1.0.4

Adeams1805 · 2020-01-02T10:13:41Z

I have @react-native-community/art version 1.1.2 and I have exactly the same issue. Any news on this ?

Rotemy · 2020-01-02T10:19:25Z

I have @react-native-community/art version 1.1.2 and I have exactly the same issue. Any news on this ?

Yeah I also encounter this.

I'm investigating and for now I've pinpointed this part of code:

return (
      <ARTShape
        d={path}
        strokeCap={strokeCap}
        strokeWidth={strokeWidth}
        {...restProps}
      />

The {...restProps} containing stroke property which causing the error

I noticed that if I pass color:{null} it stops the error.

Rotemy · 2020-01-02T12:43:14Z

For some reason my project is trying to use Facebook's old ARTShapeShadowNode which has

@ReactProp(name = "stroke")
  public void setStroke(@Nullable ReadableArray strokeColors) {
    mStrokeColor = PropHelper.toFloatArray(strokeColors);
    markUpdated();
  }

don't know how to tell my project to not use this.

Rotemy · 2020-01-02T13:20:32Z

Managed to "fix" the problem right now with installing version 1.0.2 of art library as someone suggested here: #179

I hope to find a proper fix.

minuitagency · 2020-01-02T14:36:19Z

Hi @Rotemy,

I installed the 1.0.2 of Art library but I still have the issue, what version of Progress are you using?

Thanks,
Théo

Rotemy · 2020-01-02T14:49:31Z

Hi @Rotemy,

I installed the 1.0.2 of Art library but I still have the issue, what version of Progress are you using?

Thanks,
Théo

I have 4.0.3, but I got to say that nothing (Circle, CircleSnail) is working for me, especially in iOS.

Very annoying.

minuitagency · 2020-01-02T15:14:51Z

me too... going crazy with this right now, I'm gonna use Activity Indicator for the time being.

emersonwdesigner · 2020-01-06T05:01:58Z

eu também ... enlouquecendo com isso agora, vou usar o Indicador de Atividade por enquanto.

Veja isso expo/expo#6523 (comment)

maxlxq · 2020-01-06T12:45:59Z

me too

15110011 · 2020-01-08T08:59:45Z

Downgrade it work for me: yarn add react-native-progress@^3.6.0

benazir46 · 2020-01-28T07:12:09Z

Downgrade it work for me: yarn add react-native-progress@^3.6.0

I tried all the above suggestions, but only downgrading to 3.6.0 solved the issue on android.

autoreleasefool · 2020-02-04T11:08:33Z

yarn add @react-native-community/art and rebuilding the app worked for me. I believe because this package doesn't have any native code, autolinking for @react-native-communit/art doesn't work. For RN < 0.60, react-native link @react-native-communit/art is also required.

The fix should be that this library set up the native dependency properly, or at least add linking instructions to the readme.

hqdai · 2020-02-12T09:57:37Z

Any new update on this, try latest version "@react-native-community/art": "^1.1.2" and "react-native-progress": "^4.0.3" but it's still not work.

hqdai · 2020-02-13T03:08:15Z

Any new update on this, try latest version "@react-native-community/art": "^1.1.2" and "react-native-progress": "^4.0.3" but it's still not work.

Sorry, I miss do the linking on Android for react-native-art, for those who getting this issue just follow these steps to link on android: https://github.com/react-native-community/art

pahmcoung · 2020-03-21T05:34:37Z

I have been upgraded "react-native-progress": "4.0.3",and "@react-native-community/art": "1.2.0", this issue was resolved

allan-trabacus · 2020-03-24T17:10:46Z

@sandeepsinghs thanks for the solution

It works for me

anpct · 2020-03-26T15:01:55Z

If you are on expo version 36 this wont work

DavidDem249 · 2020-03-27T05:24:47Z

problms with PieChart. help me please

337240552 · 2020-04-15T15:48:19Z

this is a bug for react native. My ReactNative version is 0.61.4, the default implementation of ArtShape's property stroke is an array, but the community one is a string!!!!

mukulramchandani · 2020-04-25T14:33:31Z

If you are on expo version 36 this wont work

yes its not working , how can I resolve ?

anpct · 2020-04-26T07:51:07Z

@mukulramchandani
You might need to eject out of expo or use an other alternative like this one

https://github.com/bartgryszko/react-native-circular-progress

mukulramchandani · 2020-04-26T08:01:15Z

@mukulramchandani
You might need to eject out of expo or use an other alternative like this one

https://github.com/bartgryszko/react-native-circular-progress

Okay. Actually I'm looking to downgrade the expo 35 (current 36) and have ART is not supported in expo 36. Looking for a way to downgrade it. Thanks for reply btw . :)

HoanHearti · 2020-05-14T03:01:39Z

any update?
I use
react-native: 0.62.1
"@react-native-community/art": "^1.2.0",
"react-native-progress": "^4.1.0",

maxlxq · 2020-05-14T03:08:36Z

"react-native-progress": "3.6.0",

jlkalberer · 2020-05-27T15:12:39Z

Until my fix gets merged you can use yarn add https://github.com/brewskey/react-native-progress

ajp8164 · 2020-05-27T20:19:01Z

Until my fix gets merged you can use yarn add https://github.com/brewskey/react-native-progress

Tried and got error trying to load two version of same view art/surface..

jlkalberer · 2020-05-27T20:23:42Z

Until my fix gets merged you can use yarn add https://github.com/brewskey/react-native-progress

Tried and got error trying to load two version of same view art/surface..

What was the actual error? It sounds like an issue with linking. You may need to delete the node_modules folder and delete any Android studio generated files.

ajp8164 · 2020-05-27T20:28:59Z

Until my fix gets merged you can use yarn add https://github.com/brewskey/react-native-progress

Tried and got error trying to load two version of same view art/surface..

What was the actual error? It sounds like an issue with linking. You may need to delete the node_modules folder and delete any Android studio generated files.

Did a clean build - tired of fooling with it. Using https://github.com/RobertFOConnor/react-native-progress-wheel instead.

Good luck!

Kristonitas · 2020-06-10T09:15:46Z

Seems like package.json is somehow used when compiling the app:

The react-native-progress already has a dependancy for @react-native-community/art@^1.1.2 (which in my case was already resolved to version 1.2.0). If I then added "@react-native-community/art": "1.2.0" to my package.json, I didn't get this crash again. The diff from yarn.lock looked like this:

...
-"@react-native-community/art@^1.1.2":
+"@react-native-community/art@1.2.0", "@react-native-community/art@^1.1.2":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
   integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
...

AKA nothing has changed!

Just for the hell of it, I removed a lot of stuff from dependancies in package.json and I immediately started getting interesting issues during compile time (react-native run-android). I don't have the knowledge of how package.json is included in the compile process, but I hope it will help the developers here to resolve this issue for others out of the box.

liuxingyuzaixian · 2020-06-15T03:36:57Z

Additonal,you should change the source code of @react-native-community/art/lib/Shape.js. And use the code "stroke={extractBrush(props.stroke)}" at line #64 which has solved my problem.

dwyanelin · 2020-07-09T02:09:29Z

Additonal,you should change the source code of @react-native-community/art/lib/Shape.js. And use the code "stroke={extractBrush(props.stroke)}" at line #64 which has solved my problem.

Love you. I like the way you solve the problem. Hope the author of @react-native-community/art will fix the issue.

dwyanelin · 2020-07-09T08:05:31Z

Additonal,you should change the source code of @react-native-community/art/lib/Shape.js. And use the code "stroke={extractBrush(props.stroke)}" at line #64 which has solved my problem.

But I found the prop stroke of NativeShape need is [R, G, B, A]. Not the function extractBrush give [SOLID_COLOR, R, G, B, A]. So I keep Shape.js the same, but modify @react-native-community/art/lib/helpers.js function extractColor.

export function extractColor(color?: ColorType) {
    if (color == null) {
        return null;
    }
    const c = new Color(color);
    return [c.red / 255, c.green / 255, c.blue / 255, c.alpha];
    //return toHex(new Color(color));//this will give a hex STRING including alpha.
}

jlucier · 2020-07-24T20:34:19Z

RN 0.63.2
react-native-progress 4.1.2
@react-native-community/art 1.2.0
Android

^ That's working for me although I did need to manually install react-native-community/art

liuxingyuzaixian · 2020-08-08T08:23:05Z

The above wording can temporarily solve the problem, if you do not use the stroke attribute。And if you want solve the problem completely,you have to introduce "react-native-community/art" component, the most important thing you shouldn't forget is adding code "new ARTPackage()" to MainApplication which can cause 'updating property stroke problem'.

pk936 · 2020-09-20T15:59:33Z

I fixed it by linking, although I have latest React version:

react-native link @react-native-community/art

surajwasnik · 2020-09-23T06:51:59Z

Additonal,you should change the source code of @react-native-community/art/lib/Shape.js. And use the code "stroke={extractBrush(props.stroke)}" at line #64 which has solved my problem.

After rubbing my back on hot tar road from the last 2 days this gives me a feeling of ice. Thank you so much.

jlkalberer · 2020-09-23T16:04:45Z

Additonal,you should change the source code of @react-native-community/art/lib/Shape.js. And use the code "stroke={extractBrush(props.stroke)}" at line #64 which has solved my problem.

After rubbing my back on hot tar road from the last 2 days this gives me a feeling of ice. Thank you so much.

Yeah.. I've had a fix out for a long time now but they won't merge for some reason.

If you run:

yarn add https://github.com/Brewskey/art

It should apply the patch that @dwyanelin mentioned.

kevgrig · 2020-12-13T23:00:39Z

I'm on Expo SDK 40 and spent a couple hours trying the following with various errors or issues:

yarn add @react-native-community/art; yarn add react-native-progress
yarn add https://github.com/Brewskey/art; yarn add https://github.com/Brewskey/react-native-progress
yarn add react-native-progress@^3.6.0
yarn add https://github.com/RobertFOConnor/react-native-progress-wheel

I finally ended up liking react-native-semi-circle-progress with yarn add https://github.com/pajicf/react-native-semi-circle-progress even though it's not even published in npmjs and hasn't been updated in a while but it's simple and works great with nice animation. https://github.com/bartgryszko/react-native-circular-progress also looks promising.

Sp3ctreZero · 2021-01-27T22:12:26Z

Any update on this? Cant make it work thanks to the same error of ReadableNativeArray cannot be cast to java.lang.String

JowelTisso · 2021-02-23T10:12:37Z

@Sp3ctreZero I solved this problem by adding java files to
node_modules@react-native-community\art\android/src/main/java/com/reactnativecommunity/art/ARTShapeShadowNode.java
and more...
I found the java files in the repo... But it was not present in the installed node module folder in my project...
So, I copied it and my problem was solved

aliferov · 2021-02-23T16:52:58Z

Need to update react-native-svg, if you have version 6. of react-native-svg will now work, with 12. works fine.

totallytotallyamazing · 2022-09-22T20:32:06Z

I'm using "react": "18.0.0", "react-native": "0.69.5" and had to downgrade from react-native-svg version 13.2.0 to 12.0.3 with this: npm i react-native-svg@12.0.3 and that fixed this problem.

danielwinkler mentioned this issue Dec 5, 2019

Art community changes #181

Merged

JeremyBradshaw7 mentioned this issue May 13, 2020

Error while updating property 'stroke' in shadow node of type: ARTShape nihgwu/react-native-pie#41

Open

jlkalberer mentioned this issue May 27, 2020

Library broken with RN 0.62.2 react-native-art/art#64

Open

Progress.Circle is not working on Android - -Error while updating property 'stroke' in shadow node of type: ARTShape #179

Progress.Circle is not working on Android - -Error while updating property 'stroke' in shadow node of type: ARTShape #179

Comments

dogaoz commented Nov 18, 2019 • edited

jiaozhouzhou commented Nov 19, 2019

dogaoz commented Nov 20, 2019

sandeepsinghs commented Nov 21, 2019

dogaoz commented Nov 21, 2019

jonnynfb commented Nov 26, 2019

premhowli commented Dec 2, 2019

sszcome commented Dec 4, 2019

dogaoz commented Dec 4, 2019

dkwl93 commented Dec 5, 2019

danielwinkler commented Dec 5, 2019

dogaoz commented Dec 18, 2019 • edited

andreferi3 commented Dec 19, 2019 • edited

Adeams1805 commented Jan 2, 2020

Rotemy commented Jan 2, 2020 • edited

Rotemy commented Jan 2, 2020

Rotemy commented Jan 2, 2020

minuitagency commented Jan 2, 2020

Rotemy commented Jan 2, 2020 • edited

minuitagency commented Jan 2, 2020

emersonwdesigner commented Jan 6, 2020

maxlxq commented Jan 6, 2020

15110011 commented Jan 8, 2020

benazir46 commented Jan 28, 2020 • edited

autoreleasefool commented Feb 4, 2020

hqdai commented Feb 12, 2020

hqdai commented Feb 13, 2020

pahmcoung commented Mar 21, 2020

allan-trabacus commented Mar 24, 2020

anpct commented Mar 26, 2020

DavidDem249 commented Mar 27, 2020

337240552 commented Apr 15, 2020

mukulramchandani commented Apr 25, 2020

anpct commented Apr 26, 2020

mukulramchandani commented Apr 26, 2020

HoanHearti commented May 14, 2020

maxlxq commented May 14, 2020

jlkalberer commented May 27, 2020

ajp8164 commented May 27, 2020

jlkalberer commented May 27, 2020

ajp8164 commented May 27, 2020

Kristonitas commented Jun 10, 2020

liuxingyuzaixian commented Jun 15, 2020

dwyanelin commented Jul 9, 2020

dwyanelin commented Jul 9, 2020 • edited

jlucier commented Jul 24, 2020

liuxingyuzaixian commented Aug 8, 2020 • edited

pk936 commented Sep 20, 2020

surajwasnik commented Sep 23, 2020

jlkalberer commented Sep 23, 2020

kevgrig commented Dec 13, 2020

Sp3ctreZero commented Jan 27, 2021

JowelTisso commented Feb 23, 2021

aliferov commented Feb 23, 2021

totallytotallyamazing commented Sep 22, 2022 • edited

dogaoz commented Nov 18, 2019 •

edited

dogaoz commented Dec 18, 2019 •

edited

andreferi3 commented Dec 19, 2019 •

edited

Rotemy commented Jan 2, 2020 •

edited

Rotemy commented Jan 2, 2020 •

edited

benazir46 commented Jan 28, 2020 •

edited

dwyanelin commented Jul 9, 2020 •

edited

liuxingyuzaixian commented Aug 8, 2020 •

edited

totallytotallyamazing commented Sep 22, 2022 •

edited