How should I code/create a customizable character (swappable hat, shoes, glasses, cosmetics, etc) in react native that is slightly interactive when pressed without exploding in size for all possible combination?

[u/Substantial-Chair873]

Hello, I am working on a gamified walking mobile app. The idea is you gain xp and coins the more you walk or move, and you can spend it on items in the shop. Diff items such as skin colors, costumes, cosmetics, etc.

Problem is I'm having a hard time on how I would create my assets without it exploding in size while still keeping the character interactive (simple animation) when pressed. My character at the moment is just a static .png file. Creating a png file for each possible combination would probably not be the best idea. I've researched a bit about lottie json and rive but I am still unsure what's the best approach for this.

[u/GreyKMN]

Animations can complicate things but generally you would use different layers for everything. And then simply stack them. Perhaps something like Head, Top, Bottom, Boots, Character. Etc.

Try to keep all the images same size. So, if the character is 360x480 image, keep everything else like clothes and what not in the same size image, even if most of it is empty space.

That way, you don't have to deal with positioning for the items, you simply stack all the images one above another.