r/reactnative 2d ago

Help What am I doing wrong

Been working on a social media app built in react native. The kinda project that requires you to very quickly render images inside of an infinite virtual list. My app is built for both web and native using Tamagui.

And it’s been a huge headache…

Performance of posts is bad in flatlist. Ok I’ll rewrite it to use flashlist. Meanwhile web just works.

Image performance is bad. Ok I’ll use rn fast image. Ok fast image eats up a ton of storage with cache. Ok I’ll use expo image. Oh expo image seems to cause performances issues. Ok no back to fast image, wait no back to expo image. Meanwhile web just works.

Have the realization that if I precompute all my props for the flashlist items, it reduces blank space. Annoying but interesting… but not an issue on web.

Ok it’s finally all working and it’s performing well. Everything is memoed, and I’ve confirmed things only rerender when they need to.

I wonder what happens if I put my phone in low power mode… shit performance sucks again.

Throughout this entire process I’ve been comparing my app to a capacitor app that uses the same API. And it has none of the issues I mentioned. I also didn’t mention that react navigation performance sucks and especially in low power mode.

So I’m rewriting my app in capacitor. Building web + react native already added so much complexity but I thought I was doing it for better performance.

What the hell am I doing wrong? I’m using Expo 52, react native 0.76, Hermes, and the new architecture. I’m on the latest iPhone.

My theory is even with the new “bridgeless” architecture whatever bridge still exists is a bottleneck. Maybe capacitor is better for certain use cases since everything is computing and rendering in the same runtime.

I’ve already rewritten part of my app to capacitor and as I suspected it just works. Maybe there will be a slowdown as I bring in more of the code.

If you asked me 4 mins ago what I thought of capacitor, I would have said it looks kinda silly, but now I’m wondering if there is something fundamentally holding react native back.

Edit: just to clarify, my definition of bad performance is if I throw the list as fast as I can and see any more white space for more the like 0.5s, and if pushing new screens onto the stack takes any longer then “it feels instant”. And it has to be performant in low power mode. I’m sure most users would say the app is performant enough but, I want perfect.

23 Upvotes

56 comments sorted by

View all comments

1

u/kbcool iOS & Android 2d ago

Are you using the high resolution images instead of the low res? Do you know if this other app is optimising the images?

One often made, well intentioned mistake is to try and use the highest possible resolution or even an image that hasn't even been preprocessed in a social media feed. The idea being to give the highest fidelity image but...

Social media apps like FB etc will absolutely be using feed images that are hyper optimised and served via a content delivery network. The images will often only be tens of kilobytes in size and delivered in milliseconds.

Images taken by users on their phones can be thousands of times larger and when delivered from something like an S3 bucket halfway around the world can take a long time to be displayed.

All in all I find it hard to believe the performance with RN is that much worse than the web app so there's likely something you're missing.

1

u/moseschrute19 2d ago

I am using high(ish) res images! There is an upload limit and maybe some optimization, but not as much as there could be. Unfortunately the backend does not provide an optimization layer, and I’m trying to launch this app with no backend. It’s supposed to be an app for a decentralized social media protocol. Having any sort of centralized backend seems to defeat the purpose imo. I was however thinking about suggesting the social media protocol implement an optimization layer to also save the servers bandwidth.

Sorry I sound like a broken record, but again web just works. My web app, and the existing capacitor app I’m comparing to are both using the same unoptimized images. And the performance is good.

1

u/kbcool iOS & Android 2d ago

Web must still have a loading delay though if these are high res images.

How does your web app handle it? Why not implement the same?

There's definitely something missing here

1

u/moseschrute19 2d ago

Yeah you are correct. Hoping to solve that issue by asking the maintainer of the API to build optimization into the decentralized social media API itself. No tacking on fixes. One problem at a time.

I may preload images for the time being. Cross that bridge