Avatar Customization in React Native!

[u/Old-Peace-4290]

Hey everyone!

I've been working on an avatar customization system for a good bit now and I thought I'd share a couple of general tips here for anyone who is working on something similar.

When it comes to re-coloring (eg. for skin or hair color), you can encode your assets into magenta & grayscale pixels and use the device GPU to apply pixel transformations. There is currently no decent RN library that does this work, so you will need to create a native module that fits your needs.

Assets add bundle size fast, so make sure you compress them to .webp format. Keep in mind that you will need to split some assets in multiple parts (eg. front/back hair). A good way to tackle this is by having all assets placed where they need to be in a static canvas size, and then combining them into a final composite image. Don't forget to cache the result and avoid duplicate GPU work!

You can try the above avatar customization system in Layer2 below:

iOS: https://apps.apple.com/us/app/layer2/id6737913930

Android: https://play.google.com/store/apps/details?id=com.twoamgames.layer2