3 ms·

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 phenome

by girvo 11y ago

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!

sn0v 11y ago
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.
- girvo 11y ago
  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!
  - vinnymac 11y ago
    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.
mrdrozdov 11y ago
This is great news! What sort of app have you built? Have you noticed any distinct differences between Android & iOS?
- girvo 11y ago
  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 https://news.ycombinator.com/item?id=11386731
vmasto 11y ago
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?
- girvo 11y ago
  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?
  - kcorbitt 11y ago
    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.
    - girvo 11y ago
      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.
      - kcorbitt 11y ago
        https://github.com/facebook/react-native/releases/tag/v0.18.0 https://github.com/facebook/react-native/releases/tag/v0.18....
- 11y ago
vbit 11y ago
How mature are the Android and iOS ports? Would you recommend them for production use?
- RickS 11y ago
  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
- girvo 11y ago
  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 :)
  - st3v3r 11y ago
    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.

by girvo 11y ago

sn0v 11y ago

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.

girvo 11y ago
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!
- vinnymac 11y ago
  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.

mrdrozdov 11y ago

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

girvo 11y ago
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 https://news.ycombinator.com/item?id=11386731

vmasto 11y ago

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?

girvo 11y ago
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?
- kcorbitt 11y ago
  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.
  - girvo 11y ago
    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.
    - kcorbitt 11y ago
      https://github.com/facebook/react-native/releases/tag/v0.18.0 https://github.com/facebook/react-native/releases/tag/v0.18....
11y ago

vbit 11y ago

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

RickS 11y ago
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
girvo 11y ago
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 :)
- st3v3r 11y ago
  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.