Hacker News Reader

Comment by girvo | Hacker News Reader

I'm in love with React Native. We're delivering the Android & iOS application we've been working on for the last three months this week, and it's been a phenomenal experience. Far more stable, and far more powerful than I expected going in to it; combined with Redux (though react-redux needed npm 3 and some tweaks to get it working due to name collisions under the packager) we built out a real cross platform app faster than I ever though possible.

Applying that to native desktop application development has me so excited its not even funny!

View on HN

I wonder is there any way to reuse your already existing React Native app within Electron so that you can also achieve both OSX and Windows support?

If you implemented your "business logic" in, say, Redux or some other Flux implementation then you could share a massive amount of code between the two; however because React Native acts as a fork of React, having both in the same project (same package.json) will run into issues as far as I'm aware; so you could share code, but not have a single project that compiles to both, at this point in time

EDIT: See below, this is no longer the case as of the latest versions?

As of one or two releases ago React Native no longer ships with a forked version of React, and just depends on the upstream "React" library like any other project. So it's compatible with most things in the ecosystem now that don't depend on a DOM being available.

Oh really? What version is that at, we've been upgrading at every release, but I could've sworn we still ran into issues even with npm v3 with external libraries installing React when installed, rather than relying on the upstream that should already exist. Might need to upgrade again!

Edited to add:

We're running v0.21.0 here, and I know there were still issues with certain libraries causing conflicts even running up to v0.20.0 -- we've not had any issues since upgrading mind you.

https://github.com/facebook/react-native/releases/tag/v0.18....

You could use it in combination with react-native-web [1], which basically allows you to use same view layer code for native and web. Using this inside electron should be OK...

[1]: https://github.com/necolas/react-native-web

As someone who's never used React, would you mind expanding on what your app does?

Also, have you noticed any slowdowns at all vis-a-vis fully native apps?

Thanks.

It's a "parent portal" for an existing child care centre management service. It allows the guardians to manage their child's bookings, communicate with (and from) the CCC, pay their bills and other features; so it's not crazy fancy, but does use a large amount of React Native's features!

That is a great use case. I have used React for administration and management services at my office as well. Being able to get the app working across so many platforms so quickly is a huge selling point for the library.

This is great news! What sort of app have you built? Have you noticed any distinct differences between Android & iOS?

See my reply here[0] :)

The biggest difference is that for real cross-platform support you need to be careful which APIs you choose to use; some have cross platform equivalents, but not all. In addition, we didn't want to just render the iOS UI on Android, so we replaced some of the components, about 10% or so to get a more native Android feel. Because the iOS version is more mature, we started with it and migrated it to Android a few weeks ago.

The biggest thing, and this is not even React Native specific, is to ensure that the components are implemented with flexbox correctly and the layout adapts properly between screen sizes. Because Android has such a disparate set of screen sizes and devices (and iOS lets you "cheat" a bit because the set is so much smaller, letting you hardcode sizes/layout that you shouldn't), some discipline is needed.

Lastly, your top-level container component will likely use padding on iOS to not overlap the status bar, don't forget to remove that on Android, because it renders it the way you'd expect: below the status bar, not underneath!

[0] https://news.ycombinator.com/item?id=11386731

How mature are the Android and iOS ports? Would you recommend them for production use?

Depends highly on your use case. For e.g. a forum reader/ news app, absolutely. For a game/something that involved a lot of robust animation and fancy graphics/transitions, not really.

We've been working on a banking app, and most of the rough edges we run into are not dealbreaking (limited transition types, weak animation support, etc) and can be worked around either with native patches or are expected to be solved as the platform matures

iOS: Rather mature

Android: Not as mature, but with some careful choice of libraries (effectively eschewing native libraries and sticking to Javascript implementations where possible) we had basically no issues.

Tooling for Android isn't as nice as iOS in my opinion (specifically the simulator even with Intel's fancy extensions sucked compare to the iOS simulator), but because we lived mainly in Javascript-land this was rarely an issue. Debugged and tested on real Android devices (this is one thing that worked really nicely with little effort).

This is a real production app for a software-as-a-service product, though it's getting a small controlled rollout to begin with. I'll be writing up a blog post or two on our experience, so keep an eye out on my website over the next few weeks/month or two -- I'm not expecting any issues though, as our beta testing has gone brilliantly :)

The Android simulator has always sucked, so that's not a React issue. If you're going to be working on something for Android, you should have a device.

Reply on news.ycombinator.com