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

[dogaoz]

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]

me too

[dogaoz]

me too

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

[sandeepsinghs]

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

[dogaoz]

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

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

[jonnynfb]

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]

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

[sszcome]

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]

@sszcome did anyone create a pull request yet?

[dkwl93]

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

[danielwinkler]

I created a PR at https://github.com/oblador/react-native-progress/pull/181

[dogaoz]

It is finally merged. Imagine how tired we are lmao

meme below

[andreferi3]

has anyone succeeded to resolve this issue ?

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

[Adeams1805]

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

[Rotemy]

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]

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]

Managed to "fix" the problem right now with installing version 1.0.2 of art library as someone suggested here: https://github.com/oblador/react-native-progress/issues/179

I hope to find a proper fix.

[minuitagency]

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]

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]

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

[emersonwdesigner]

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

Veja isso https://github.com/expo/expo/issues/6523#issuecomment-571001942

[maxlxq]

me too

[15110011]

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

[benazir46]

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]

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]

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]

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]

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

[allan-trabacus]

@sandeepsinghs thanks for the solution

It works for me

[anpct]

If you are on expo version 36 this wont work

[DavidDem249]

problms with PieChart. help me please

[337240552]

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]

If you are on expo version 36 this wont work

yes its not working , how can I resolve ?

[anpct]

@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]

@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]

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

[maxlxq]

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

[jlkalberer]

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

[ajp8164]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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

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

[surajwasnik]

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]

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]

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

1. yarn add @react-native-community/art; yarn add react-native-progress
2. yarn add https://github.com/Brewskey/art; yarn add https://github.com/Brewskey/react-native-progress
3. yarn add react-native-progress@^3.6.0
4. 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.