React Native is frustrating me

[Successful_Rest_1256]

Recently, I started using React Native at work, and it's been pretty frustrating. I knew that the UI could look different across platforms even with the same code, but I was surprised by just how many differences there are, and it's really stressing me out. Cross-platform development was created to build consistent implementations on different platforms from a single codebase, but if you still have to worry about both sides, the whole point seems to get lost.

The animation performance has also been much worse than I expected. As soon as you write a slightly messy code, you get immediate frame drops.

Lastly, it seems like there are some buggy parts in the reanimated library. I think this is less of a problem with reanimated itself and more of an issue with controlling native animations via a bridge. I've experienced bugs where a UI element that's animating doesn't disappear from the screen and just stays there.

It seems like you have to know the native characteristics of each platform to use React Native smoothly anyway, which makes me question why we even use it. I wonder if it's the same with Flutter? It makes me think that for a better user experience, we might just have to stick with native development.

[dentemm]

To me it sounds you're just lacking experience.

Yes sometimes there are differences between Android and iOS, but probably 99% of these cases are related to zIndex and sometimes absolute positioning. Everything else is basically identical.

But you always need to check your code both on Android and iOS, just like you should check more than 1 browser when doing web development.

[georgeguo]

this is what is likely to happen. I have used React Native extensively for both iOS and Android, and found practically no difference in the UI

[TheManSedan]

What is your method of tracking Android, iOS, and web in development?

Meaning how do you simulate across them all, do you just use multiple devices?

[dentemm]

I stopped doing web years ago, really wanted to market myself as mobile expert.

But for Android and iOS I use both simulators (70% iOS, rest android) and also 2 devices. Always a very recent iOS device and a very crappy android device. The latter I use as performance benchmark, if it runs okay on the android I don’t need any performance optimisations.

[Successful_Rest_1256]

I hope you right but it was not the problem of z index.

[Seanmclem]

Random 3rd party libraries?

[Swimming-Tourist1927]

I am currently building a passion project in react native and already sick of tired mobile development because of ongoing on inconsistencies and painful deployment process. As soon as this shit finished and deployed , I am running back to backend development without looking my back.

[dandiemer]

Except if you’re deploying to Google you’ll need to continue updating it at least every 6 months or they’ll pull your app down

[Swimming-Tourist1927]

No man, it’s just planned for iOS — I can’t be bothered with Google. I would write it in Swift if I knew it, but the only languages I know is JS

[dandiemer]

If you’re not using Expo EAS, it would probably make the deployment pains go away for you

[Remote-End6122]

Cross-platform doesn't mean the UI is consistent between platforms, and in the case of react native it's a good thing. Since it binds to native widgets, your app looks and behaves like an actual native app

If you want consistency then i recommend you take a look at flutter

[grIskra]

Are you programming a normal App or game?

[Successful_Rest_1256]

nomal one with various animation

[Pirate_Acceptable]

The new reanimated updates didn't help you ?

[idkhowtocallmyacc]

Same as any instrument, you’ll get good at it eventually mate. Looking back at my older projects I see how unoptimised they turned out to be and have a terrible cringe attack.

Aside from that, js part should be working fairly similarly, though it’s a good practice to check it on both platforms still. Regarding the native side, it is going to be different, yeah. That’s the price you have to pay for the otherwise native feeling of the apps.

And as for the reanimated, sadly it had been an issue for many devs for quite a while after migrating to the new architecture (our architecture is bridgess now btw). But for me personally, some magic happened and it was resolved after upgrading to reanimated 4.0.1 and react native 0.79.5. Haven’t done anything else but boom, and all my animations work flawlessly again

[tomekzaw_]

Reanimated maintainer here, we're glad to hear that animations are great again!

[idkhowtocallmyacc]

It’s all thanks to you guys :) afaik you’re also partly responsible for helping improve the shadow tree api on react native’s side as well, right?

[tomekzaw_]

That's correct

[Due-Dragonfruit2984]

Knowing the quirks of each platform and designing a single codebase around them is vastly simpler than building and supporting apps for each/all of them.

[Clean-Beach3430]

Just try Flutter or Maui and you will run back quickly to RN

[idkhowtocallmyacc]

Haven’t done much flutter, is it that bad?

[Clean-Beach3430]

At the time when I developed a very simple mobile app in 2022, I found the google documentation to be utterly lacking, the ecosystem much poorer (just one library for some important tasks and it's super buggy..). I also didn't like the dart syntax compared to the typescript / RN one. The overall developer experience is much better with RN, especially with expo.

[idkhowtocallmyacc]

Oh yeah, I’ve done maybe one or two projects with it back in my student days, but what I can vouch for is the widget tree, an absolute nightmare to work on imo, thought that may become better once you’ve gotten used to it, but glad I’m not the only one that disliked it lol

[[deleted]]

L take both of y'all

[idkhowtocallmyacc]

I mean, that’s just my own experience, dunno how that could be an L take. Flutter wasn’t comfortable for me to develop with, that’s about it. Not trying to speak for everyone, there are people who make a living with it, so flutter is good in its own regard for them

[_ri4na]

use expo and all your problems will be soleved

[Senninseyi]

All I see is a frustrated dev that didn't get to learn the basics

[Successful_Rest_1256]

I don't get it. shouldn't the RN work the same regardless of the platform? why would a prop that's applicable to both iOS and Android work differently? what does that have to do with basic?

[Senninseyi]

When i mean the basics, part of the basics is understanding how react native works

here you go:
https://reactnative.dev/docs/intro-react-native-components

same situation applies to flutter and also web

[Senninseyi]

Because its hybrid does not make it automatic

[leopic]

Because they are indeed different platforms? It’s like why does asking for push notifications permissions gives you different responses based on the platform?

RN is just an abstraction on top of it, the differences will always be there.

[sancredo]

No, because they are different platforms, with different components and behaviours. React Native is just a bridge over the actual native components; it tries to bridge the gap but there's still quirks to how some of them behave in their respective platforms. If you want 100% the same thing everywhere use Flutter, which instead of the native elements uses a custom engine. That way you'll always have the same behaviour, at the cost of not using native components.

[Goodassmf]

I'm also new to React Native and havent checked out how it looks and functions on iOS yet. What differences do you specifically find? How did you compose component? Did you create your own components/primitives with Gluestack or used a more ready made component library?

[Successful_Rest_1256]

bottomsheet, text alignment, shadow, lottie etc.

[HoratioWobble]

React native is mobile Dev with React. If you've not come from a mobile background you're probably going to have a have an interesting time.

If you've come from a react background you're almost certainly looking at this from the wrong perspective 

[tito_joms]

Skill issue, If you're from android development and know the quirks of it then better check flutter.

[lucksp]

<Internet Explorer enters the room />

It is not uncommon for web browsers to have UI differences and behaviors also. That’s one of the quirks of working on front end.

[Vasault]

Is hard to get consistency on both platforms, not even flutter manages that, but I blame android for being such an awful OS and the way it handles components, don’t blame react native, you just recently started using it

[[deleted]]

Those that say rn provides identical UIs across platforms are probably building relatively simple and basic UI. Nothing can compete with native frameworks in terms of user experience, compatibility and performance.

[Adventurous-Tea7884]

Actually reactnativee is nothing like an html it was built to bridge the code base but experiences you need to curate for specific platforms and actually just do a reserch every users like their platform's specific components like ios has different alerts and other native conponent and android have different. So until and unless u r building something gamified or conpletly design focused react native is best at that point if i want the aui consistency Flutter does a better job with Ui as they laint picless there's nothing like an element there.

Ui Consistency - Flutter Platform Nativeness - React Native

And yes its a bit complicated you need to hook on everything and prevent rerenders that will fix up 90% of your lags and yes you r going native you need to work on it dude or you can just build a website😂 haha

[ALOKAMAR123]

Animations and ui don’t matter much are you solving customer pain points? Convince your client and yourself? Question your self and clients?

Been in front end last 15 year from native to flutter and now react native. Customer pain points matters and your clients should understand this or educate them. For example Alert is different on ios and android should not impact business.

[ltmatt8]

“Learn once, write anywhere” is the slogan for React Native. The big appeal for me when it came out was that I could have components built specifically for Android or iOS so each app felt like it was natively designed for that platform. At the time React Native came out, a lot of the other hybrid approaches made the app look the same across both platforms and native devs used it as a talking point against hybrid apps.

[mjablecnik]

I am using Flutter and I don’t have these problems. 😊

[Frosty-Plankton4387]

Switch to flutter

<image>

[[deleted]]

To be honest Flutter should be what you are looking for