search

redpandatronicsuk / arty-charty

React Native plugin for rendering charts using ART
MIT License
43 stars 7 forks source link

Black fill on spline-area for Android #4

Closed lprhodes closed 7 years ago

lprhodes commented 7 years ago

Hi,

While iOS works great, Android is showing a black fill for some reason. Any ideas?

iOS:

screen shot 2017-05-22 at 4 31 34 pm

Android:

screen shot 2017-05-22 at 4 31 23 pm

Thanks!

Luke

redpandatronicsuk commented 7 years ago

Hi, I also noticed that on Android and couldn't fix it. It seems to be a problem with ART on Android. Using react-native-svg instead of ART seems to fix that. I'm very busy at the moment, but some time soon I'll port this project over to use react-native-svg instead.

redpandatronicsuk commented 7 years ago

I just pushed the new code after the react-native-svg migration. I didn't get around to testing it on Android yet, but I think it should fix the fill issues. I'd appreciate it if you could try it out and let me know if it works now. Thanks!

lprhodes commented 7 years ago

I'm seeing the error "Can't find variable: Group" in the latest version.

I'd be happy enough with the old version for Android if I could remove the fill - is that achievable?

screen shot 2017-05-26 at 8 29 47 am
redpandatronicsuk commented 7 years ago

I think I fixed the Group error. ART used tags and in react-native-svg they are called just .

The problem with the fill is the following: To give the fill under the active marker that glow effect, we use a linear gradient for the fill, with stops placed where the markers are. All stops are 0.5 opacity, but the stop for the active marker, which has a value of 1 for opacity. As far as I can tell, linear gradient doesn't work for Android, i.e. it always renders black. These are the option I can think of we have:

  1. Try the new version (1.0.2) and see if that works now
  2. Instead of using spline-area, use spline on Android. This will only draw the line, without the area/fill below the line
  3. I could add an option to the old code (the one using ART) that if it is running on Android it uses a solid colour instead of a liner gradient. Then however you wouldn't get the feedback of the selected point in the fill.
  4. Fix the ART bug on Android or find a workaround :)

If you give 1.0.2 a try, please let me know if it works.

lprhodes commented 7 years ago

Hey - recorded a couple of videos to show some issues with the new ART when combined with setState Also it has an odd height. Old (ART) and new videos:

ART: https://ufile.io/bpy7a

SVG: https://ufile.io/paude

redpandatronicsuk commented 7 years ago

The setState issue should be fixed in 1.0.3. About the height: We always use 0 as the bottom of the Y axis. I suppose that is not a good assumption. For the next version I will try to add that you can set the Y axis range yourself or that it calculates it with some padding from the minimum and maximum Y values.