Faster rendering for avatar options?

[dangtony98]

Firstly, I want to say thank you so much for this fantastic package!

For background context, I'm building a platform with React Native and have chosen to use the Open Peeps avatar set; users can press on different attributes and visualize different options for how their avatar might look as in the screenshot below. My implementation has been to render the avatar options in a FlatList that uses createAvatar() together with SvgCss from react-native-svg to render various SVGs.

The issue is that certain attributes have many options (e.g. head has 48 options) which take time to render. The result is that when I press on the head tab to view the corresponding options, the screen freezes for 2.5 seconds presumably to load all the different options before displaying them all at once. I'm wondering if you could recommend any better approach to render all the avatars without such lag?

[FlorianKoerner]

I think the bottleneck here is the rendering of the avatars. The pure generation is very fast. You could use the HTTP API and then query the avatars as PNG. However, your app will need a stable internet connection.

• New API Version with PNG Support #179

A quick search for "react-native-svg performance" yields many hits with similar problems, but unfortunately never a solution.

Unfortunately, I am not familiar with React Native.

[dangtony98]

Thanks for the quick response!

I looked into react-native-svg performance a little more and decided to go with your proposed HTTP API option instead because figuring out how to speed up the former option didn't seem worth it — looked like a lot of people experienced similar issues; your solution ended up to be a much more seamless lag-proof experience on my end.

Thanks again!

[FlorianKoerner]

Maybe you will find a solution here: https://github.com/react-native-svg/react-native-svg/search?q=performance&type=issues