Android Support?

[dangnelson]

facebook/react-native@27ac047
https://github.com/facebook/react-native/releases

[dangnelson]

It looks like it's mostly supported as it is. I think there's probably another step that need to happen on Android to get circles and pies working.

[oblador]

I tried this out in the simulator yesterday; ART works, but not like the iOS version. All ART based progress indicators are showing up but in a broken way.

I'm tight on time right now and am not working on any projects for Android so I'd be very happy for some help here :-)

[lesniakania]

I think strokeDash prop is just ignored on Android :( Resulting in drawing always full circle :(

[lesniakania]

Yeah, it looks like strokeDash is just not yet supported in ART for Android: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/art/ARTShapeShadowNode.java#L186

[oblador]

@lesniakania: Thanks for investigating 👍 Let's just wait this one out, it's possible to do a different implementation but it would be a rewrite I just don't have time with right now. Happy to review a PR though!

[oblador]

@lesniakania & @dangnelson: Commit 748fe4d refactors away from use of strokeDash, but android is still quite broken. If you have the time I'd be grateful if you could debug it – I'm currently not using android myself.

[lesniakania]

Hi, I would like to help you, I have some time now for that. But I would appreciate some guidelines from you about idea how this should work. I have little problems with understanding it from the code itself.

I see progress with the progress (;)) but something is indeed still wrong on Android.
Circle is not started from the top or is counter-clockwise. And progress reflected by circle is definitely wrong.
See the picture:

[oblador]

@lesniakania: Actual drawing code for the progress circle is located here: https://github.com/oblador/react-native-progress/blob/master/Shapes/Arc.js

As to what's wrong on android I'm not sure, but this might be related: facebook/react-native#5311 & facebook/react-native#5856

[dgladkov]

I am the author of facebook/react-native#5856, can confirm that arc drawing is broken on Android at the moment.

There's a logic error in the code that incorrectly sets arc direction to opposite. Also angles of CCW arcs need to be converted to CW to be displayed properly (Android addArc technically supports CCW drawing direction, but I had weird bugs trying to make it work).

[lesniakania]

@dgladkov so you are working on that? I tried changes from https://github.com/facebook/react-native/pull/5856/files but it does not solve my problem.
Is it something I can do to help?

[dgladkov]

@lesniakania the changes fixed my problems with drawing wedges, but there may be some edge cases that I didn't fix. I'm not familiar with this project, could I use example code from the repo to reproduce the bug you're experiencing?

[dgladkov]

Tried the example, seems that there's a lot of work to do to support Android:) Even Progress.Bar component that doesn't even uses ART suffers facebook/react-native#3198 with child animated view pushing through container with border radius

[luisfuertes]

Hi, i have a problem in Android, on iOS my chart works, but on Android the animation doesnt run.

My chart code:

              <View style={{flex: 0.5, alignItems: 'center'}}>
                  <Progress.Circle
                    progress={0}
                    indeterminate={false}
                    color={Commons.Colors.white}
                    unfilledColor={Commons.Colors.overlay}
                    borderWidth={0}
                    size={145}
                    showsText={true}
                  />
              </View>

My animation function:

    let progress = 0;

    let timer = setInterval(() => {
      progress += 0.01;
      if (progress > maxValue) {
        progress = maxValue;
        clearInterval(timer)
      }

      if(chartType == "data"){
        dispatch(updateDataChart(progress))
      }else if(chartType == "voice"){
        dispatch(updateVoiceChart(progress))
      }
    }, 50);

[luisfuertes]

And with Progress.Bar on Android, borderRadius doesnt work.

                            <Progress.Bar
                                style={{margin: 10}}
                                progress={this.props.dataChartProgress}
                                indeterminate={false}
                                height={30}
                                borderRadius={15}
                                animated={true}
                                unfilledColor={Commons.Colors.opverlay}
                                color={Commons.Colors.green_main}
                            />

[luisfuertes]

You know when it will work on Android?

[oblador]

It's finally here!

[gitlovenotwar]

@luisfuertes I had the same issue on android borderRadius.