Hacker News Reader

Comment by mattlondon | Hacker News Reader

How are the animations done? They are pretty janky and horrible on Firefox 63, so I am guessing they are not using normal CSS animations?

I've not used react or react-native so not sure how it handles this.

View on HN

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...

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.

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?

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

Reply on news.ycombinator.com