undefined | Better HN

0 pointsskidding7y ago0 comments

Yes. This is what I meant with "for the most part".

So I first made the app web-only, which is what I know best. Used CSS animations and they were smooth!

Then converted the project to React Native (because I wanted to learn how to make a RN app). But because I wanted to keep using the web app I used react-native-web, which had also been intriguing me for some time.

Result? Animations became much slower! react-native-web basically polyfills RN's Animated library [0], so maybe it's not very optimal. But to be honest, even when running the native app the animations seem janky (tried on Android via Expo and on iOS simulator).

So react-native-web is a great project, but I'll likely not use it again for a similar project. I'm a web believer anyway, so I'll probably do just web apps going forward unless some use case really benefits from native APIs.

[0] I never looked at the source but I assume the code for web animations is here https://github.com/necolas/react-native-web/tree/3fa18becc76...

0 comments

servercobra7y ago

Thanks for the rundown. I've been considering react-native-web, and I'll still give it a look personally, but I had concerns that this is how an app would turn out (minor jank in hard to fix spots).

I'm very excited for Capacitor's support for React coming soon! It seems pretty awesome with Angular, so I'm hoping supporting React provides the same experience.

skiddingOP7y ago

You should definitely give react-native-web a look. I've had a good experience with it and the only issue is animation. I don't know how any UI animation lib can match the performance of hardware accelerated CSS transitions btw. As soon as you have to run user code on every frame things go south.

Of course I'd love to be proven wrong and shown what animation optimizations I missed in my code.

I haven't heard of Capacitor yet, but I've used Cordova in the past. Is it a big improvement?

skiddingOP7y ago

Update: I made some perf optimizations unrelated to animations. Essentially preventing needless component updates. Feels smoother on my end.

Let me know if you see any improvement: https://jobs-done.now.sh

j / k navigate · click thread line to collapse

0 pointsskidding7y ago0 comments

Yes. This is what I meant with "for the most part".

So I first made the app web-only, which is what I know best. Used CSS animations and they were smooth!

[0] I never looked at the source but I assume the code for web animations is here https://github.com/necolas/react-native-web/tree/3fa18becc76...

0 comments

servercobra7y ago

Thanks for the rundown. I've been considering react-native-web, and I'll still give it a look personally, but I had concerns that this is how an app would turn out (minor jank in hard to fix spots).

I'm very excited for Capacitor's support for React coming soon! It seems pretty awesome with Angular, so I'm hoping supporting React provides the same experience.

skiddingOP7y ago

Of course I'd love to be proven wrong and shown what animation optimizations I missed in my code.

I haven't heard of Capacitor yet, but I've used Cordova in the past. Is it a big improvement?

skiddingOP7y ago

Update: I made some perf optimizations unrelated to animations. Essentially preventing needless component updates. Feels smoother on my end.

Let me know if you see any improvement: https://jobs-done.now.sh

j / k navigate · click thread line to collapse