onRender event

[zek]

Hi, I'm porting https://getavataaars.com/ this library.

It's working fast enough on IOS (0.5 - 1 second delay for rendering)
but it is very slow on Android (3 seconds)

I know you got some plans to improve performance on Android but at least is it possible to show a loading indicator while rendering?

[msand]

Could you try to profile it in android studio? It's quite likely that you're not using the most efficient primitives to create the avatars. Seems like it should be possible to create equivalent output using only paths with fill, removing all uses of mask and opacity. That would probably speed things up significantly.

Estimating how much work there is to do is not easy, and any loading indicator would only make it take even longer. If you really want it, I would recommend using something like https://github.com/oblador/react-native-progress/blob/master/Bar.js
And conditionally render it, such that once onLayout gives you the dimensions of the svg, you hide the progress bar.

[zek]

I solved loading as below. I also tried onLayout but It doesn't react changes neither my solution.

  componentDidMount() {
    setTimeout(() => {
      this.setState({ loaded: true });
    }, 10);
  }

Actually I dont know anything about how to profile on Android but I am planning to share react-native version of avataaars on github. After I upload, could you help me to improve performance?

[harrisonlo]

@zek Let me know when you've shared the repo, I'm interested in making it work on RN too

[msand]

@zek You don't need to know anything about profiling android from before, just read the docs, or start the profiler and explore: https://developer.android.com/studio/profile/android-profiler
If you know how to interpret numbers, you essentially know everything you need. Bigger numbers mean more time is spent / memory is used, essentially simple as that. I've used it just a few times, so I don't think I have more to teach/help than that with regards to this. It's the same as any kind of profiling. Just find the biggest time consumers and try to find other cheaper ways to achieve the same output. And quite probably, just removing any masks and opacity will be enough / almost the only thing that can be done, at least by making a quick guesstimate from the svg you posted here.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[stale]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.