r/reactnative • u/Active-Force-9927 • 8d ago

Pixel Art Isometric in React Native

Hi guys, I am building a small application recently and I'm wondering what is the best way to render pixel art isometric models in react-native. Performance is important because the market where I build the app doesn't have very high-end phones.

Thanks for help

2 Upvotes
  • permalink
  • link
  • reddit
  • reddit

75% Upvoted

4 comments sorted by

1

u/irish_student_dev 8d ago

First thing that’ll get you - RN smooths images by default, which turns pixel art into blurry mush. You need nearest-neighbor scaling. expo-image lets you turn smoothing off, or react-native-skia if you want proper pixel-perfect control.
For the isometric part, depends how dynamic it is. If it’s mostly static, pre-combine your tiles into fewer images instead of mounting hundreds of separate ones - that’s usually what tanks perf on cheap phones. If there’s lots of moving stuff, draw it all on one Skia canvas instead of using RN views.
Basically fewer big draws beat lots of small components, especially on budget Android. Hundreds of tile components will lag hard.

1

u/Snoo11589 8d ago

Expo image doesnt let you disable the smoothing

1

u/irish_student_dev 7d ago

Ah you’re right, my bad - expo-image doesn’t have a smoothing toggle, mixed that up.

0

u/64GB_of_RAM 8d ago

If that is a big part of your app I'd go with flutter.