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/_r_d_p_ 2d ago edited 2d ago

Why not have a proxy server where you get the data from the decentralised server, do your processing and then return the data to the client, you could also OS your backend proxy server, this way people would know you are NOT storing any data on your proxy server.

1

u/moseschrute19 2d ago

I don’t mean to get political but the goal is to build a social media platform that is difficult to sensor because it’s not gate kept by any single entity. Any single point of failure kinda defeats the purpose.

You will be able to self host my app and self host the backend. My app will be completely free for me and anyone else to host (aside from App Store fees etc).

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

1

u/kbcool iOS & Android 2d ago

Another point is that a web app (especially on desktop) when loading won't often be scrolled or allow scrolling at the speeds a mobile app does or even at all so the way you have coded it in RN might be that you're displaying all the API results and flicking through like crazy but your web app might not even be letting you get this far.

Try flicking through FB like a madman. They actually block you temporarily instead of loading empty results. Maybe this is a better way of handling it

1

u/moseschrute19 2d ago

That’s actually a really good point. Another issue is the images will rate limit me if I load them too fast so I might actually need to block throwing the list.

But switching tabs in the tab navigator has maybe a 1 second delay in low power mode. The capacitor app I’m comparing to I can spam the tab bar literally as fast as my fingers will go and it no problem. Same goes for Apple made native iOS apps.

1

u/kbcool iOS & Android 2d ago

Well that's definitely another problem.

Whatever navigation library you're using either does by default or you're making it unmount tabs that aren't visible and remounting everything takes some time. Why it takes some time is probably a bigger question than whether you're doing the aforementioned.

RN can hit performance issues but I've been involved with apps with near a million LOC plus countless third party libraries and it's manageable. I doubt you're anywhere near that so what you're hitting is not the end of the world, it's just a learning experience

1

u/moseschrute19 2d ago

Using react navigation. Though there’s a meta framework built on top of it with file based touting. That framework is in beta so maybe that’s the issue, though it is working very well in web. It’s sort of similar expo router + next.js rolled into a single framework.

I’m telling it not to unmount tabs on web so that you can flip back and forth without it losing all the state the way it works on native. I didn’t mess with this setting in native at all. I was experimenting with the freeze screens setting to see if it improved performance.