
Developing Our First iOS App with React Native - tomtang2
http://code.hireart.com/2016/02/24/react-native-ios-app/
======
warcher
Truthfully, the language barriers are _nothing_ next to the API barriers
dealing with your platform of choice. I am probably giving away my age here,
but there's very little that's new under the sun after you've tussled with...
say one each of the big three language families. These being: Nasty old C (not
going anywhere, ever. Deal with it.), modern scripting languages (Ruby,
Python, et al) and the real deal functional languages (lisp, ml, haskell,
etc). It just turns into "Oh, this is how they handle an array. Do I have any
functional plumbing? Ok, great. How do I dispatch a thread? Ok, let's go."
It's just not that interesting after a while.

Objective-c is quirkier than most, swift is nice but still baking, but it
really all boils down to the platform APIs. And you're gonna have to get wet
at a platform level if you want to provide functionality beyond a mobile web
page. (Albeit one with improved load times since it's coming from disk, at the
cost of dynamic updates since it's coming from the app store.)

~~~
misiti3780
i agree with you, although i think you are forgetting to add (and maybe it is
implied here and i missed it) that learning mobile development requires you to
not only learn new language APIs in objC/swift, but you also have to learn
some new design patterns (delegation, etc.) and most importantly the SDKs
(CocoaTouch)

if you can use react native and avoid learning a lot of this it is a big win -
I havnt used it yet, and I have a hard time believing it a mobile only company
would use it to build their mobile app, but i am excited where it is going.

~~~
coldtea
> _learning mobile development requires you to not only learn new language
> APIs in objC /swift, but you also have to learn some new design patterns
> (delegation, etc.)_

Delegation has been a standard feature of desktop APIs for decades. Not just
on things like Smalltalk and ObjC -- it has been the standard .NET model for
UI events since C# 1.0.

~~~
jaegerpicker
sure but the majority of developers writing code write webapps. Some there are
some desktop apps out there but not a lot.

~~~
danappelxx
Going to need a source on that 'majority' of which you speak of as if its a
fact. Sure, web development is popular, but there are a _lot_ of developers
working on other things (which potentially include delegation). Also, I'm sure
you'll many web frameworks that use the delegation pattern.

------
jhgg
React Native is pretty awesome - especially if you've got a web version of
your app. At work, we use React Native for our iOS application - and are able
to share pretty much all the store & action creators logic for our web (and
desktop) app. It's been pretty huge as all our iOS engineer (we only have
one!) really has to do is do the view specific stuff for iOS, the rest being
shared with the web/desktop version. Also, our engineers that work on the web
application can contribute to the iOS app with ease too.

Our general product iteration strategy involves building it on the web version
and then porting it to iOS fairly quickly. For a chat application, our stores
handle a lot of data, so it's been awesome to have that code shared.

React Native's bridge is also alright. We bridge with Component Kit for the
chat messages view & WebRTC for the voice side of things fairly easy from JS.

Also, being able to update the bundle w/o doing an App Store update is pretty
big too.

Here's the app if anyone wants to try it:
[https://itunes.apple.com/us/app/discord-chat-for-
gamers/id98...](https://itunes.apple.com/us/app/discord-chat-for-
gamers/id985746746?mt=8)

~~~
aaviran
Just wanted to say Discord is awesome!

I didn't play on-line for years, last time I did regularly, the standard for
voice communication was Ventrilo/Teamspeak. When I first used Discord a couple
of months ago, I was just shocked. It has a _decent_ webapp. I can create my
own server for free. It takes less than a minute to get going. It just works.

Truly amazing work, keep up

------
leosantos
On a more technical note - I'm exploring React Native (having significant
experience shipping native iOS Apps) and while on the face of it React Native
looks amazing, as I go deeper into building something production quality, I've
hit roadblocks with doing simple (natively) things like scrolling a scroll
view to focus on a text field that's partially visible and changing the
offsets of a scroll view to prevent the keyboard from masking the focused text
field in a way that doesn't appear glitchy.

Did you encounter any such problems?

~~~
jordwalke
I've implemented one solution to this in FB's Groups App. Try that experience
out and let me know what you think. Also, Nick Lockwood should comment here.

~~~
cridenour
Is the solution something you can share on a general level? Would love to see
how you approached it.

~~~
jordwalke
It's not incredibly advanced: It mostly just consists of measuring where
exactly the current text box is in the scroll view, how high the text box is,
and then having the scroll view scroll to that location, followed by fading in
a docked text input right on top of the underlying one. It's pretty slick, but
I'd encourage the community to recreate it in a reusable component and open
source it.

------
Smudge
> Learn once, write anywhere

What's most amazing to me about React Native was how quickly we were able to
go from idea to product (~3 months working only part-time) using our existing
knowledge as web developers. We did have to write a few lines of Objective-C
here and there, but for the most part all of the views and interactions fell
together the same way a webapp would.

~~~
estreeper
As someone who is about to embark on a similar route, that's interesting and
exciting to hear. Was it both Android and iOS? If so, how much of the
codebase/time was spent on shared code versus needing to write platform-
specific portions?

I've seen the Facebook post about developing Ads Manager (though it glosses
over some details), but it would be interesting to hear other people's
experiences.

[https://code.facebook.com/posts/1189117404435352/react-
nativ...](https://code.facebook.com/posts/1189117404435352/react-native-for-
android-how-we-built-the-first-cross-platform-react-native-app/)

~~~
Smudge
We built it for iOS, but I expect Android would have been a similar experience
(albeit with much more cross-device testing required).

Hard to say how much of it was platform-specific, since we only targeted 1
platform (for now). But the large majority of the code we wrote exists in
React components or in related JS files, so porting it over to Android should
be a matter of decoupling the parts of the code that rely on native features
(i.e. camera, navigation, etc).

A lot of that work is already happening in the React Native community so I
expect the cross-platform support will keep getting easier.

------
marknutter
What I'm curious to know is, outside of the arguments about React being the
superior pattern for developing UI's, how is this fundamentally better than or
different from other hybrid libraries like Appcellerator Titanium or Xamarin?

In my experience they all fall short when you try to get the last 20% of your
app written. Because you're not writing in the native language, directly
accessing native API's, you're always going to be limited to the abstractions
that the hybrid framework has (or hasn't) defined.

I much prefer either going full native or full HTML5 because I never hit a
wall when I try to do something that hasn't been covered well by the hybrid
framework yet.

~~~
EvanPlaice
React Native doesn't use embedded webviews and provides an escape hatch to
write native code when Reactive Native's capabilities fall short.

~~~
marknutter
That's no different than appcellerator or xamarin though. And in the case
where you _are_ just using embedded webviews you can easily write native code
alongside them. Cordova is written in objective-c and is easy to understand.

~~~
EvanPlaice
You're right, I was thinking of platforms more like Cordova.

I did a little reading and it appears that React Native, Appcelerator, and
Xamarin are pretty close to feature parity.

------
Apocryphon
I'm sure this observation was probably made tens of thousands of times before,
but- is the React Native and frameworks like it the beginning of the end of
the "native vs. mobile web" debate? A synthesis of both approaches?

~~~
kin
What I'm betting on is the mobile web browser. I know going HTML5 on mobile
has failed in the past, but the future can still come. On desktops, desktop
apps ruled until web apps became super powerful. I'm betting on the same fate
for mobile web apps.

~~~
wvenable
On my mobile I absolutely use and prefer native applications. I only use my
mobile web browser for web browsing tasks. On my desktop, I only use my web
browser for web browsing (searches, news, content, etc) and I hardly use any
web applications.

I don't feel like I'm unique in this.

I think this "synthesis of both approaches" has merits.

~~~
deskamess
There are times when the native app is great, but all the permissions that you
have to give up have me fallback to the web version. There is a native phone
app for a popular online course that has recently started asking for access to
'Phone Id/what not' on Android. Why? Just show me the videos of the courses I
paid for. I refused to update and these days I just log in via Chrome and play
the video on there. Not the best UX but that is what I will associate with
that product going forward.

I wish Android would make something granular (and understandable) or at least
let me disable permissions after the fact.

~~~
Fargren
You can, starting form android 6.0. Adoption of the latest Android versions is
as slow as ever, though.

------
iheart2code
I am particularly interested in hearing about view transitions. I know
JavaScript, Android, and iOS development and found that, while I could easily
make a React Native app work on iOS and Android, it was lacking the polish
that modular view transitions could provide.

------
user8341116
>Java? Objective-C? Swift?? I don't have time to learn things!!! Now let's
start coding XDDDDDD

Every cross platform mobile framework in a nutshell.

~~~
jdhawk
Its not the language thats hard, its the framework. Solution? Create a new
framework?

Something is broken

------
epberry
> Not knowing Objective C or Swift

I think this is a key phrase here. I'm writing a RN Android app without
knowing much about Java.

~~~
latishsehgal
Have you run into any gotchas? I am thinking of doing the same thing for a
simple app.

~~~
tomtang2
There were definitely some head scratchers along the way, I think I address a
few of them in this post but I plan to write a few more posts that show how we
tackled some issues in more detail so keep an eye out for that.

------
incepted
This article is pretty meaningless without any link to the app so we can see
for ourselves. I couldn't find it in the Apple store, did anyone?

------
mostafaberg
Why is this on the top of HN ? Honestly, this is a bad thing, not a thing to
show off.

To quote the author: "We're web developers, not iOS developers." EXACTLY,
don't bring your web tech into native platforms, learn to do it the right way
or just hire someone who knows how to do it.

Seeing things like that creeping into becoming a norm makes me cringe

~~~
currentoor
This is on the top of HN because people, like me, are interested in it. You
say learn to do it the "right way", by that logic we should have stuck to
making desktop only apps instead of browser based web apps. I'm not saying
this is better or worse. But I certainly think it's an approach worth
considering.

~~~
mostafaberg
It's a great piece of tech, I'm not saying anything against that, I'm saying
that it shouldn't be used as a replacement for native programming because you
don't want to learn a new language. react will come with huge limitations and
deps that you don't want to even think about, it's never easy as "code once,
deploy everywhere", this is usually a bad decision any company makes,
engineering wise.. same reason as adobe air never took off, it's a bad idea,
the only reason this is taking off is because people already know JS and don't
want to learn something else.

By the "right way" I mean use every language for its intended purpose, you
can't build desktop apps in browsers, that's why we have Javascript. and i'm
saying we should keep it that way

~~~
seivan
React is _native_. It's a JS interpreter on a separate queue rendering native
UILabels and UIViews. I'd say the concept is far more superior to UIKit which
disgusts me, and I've worked with for almost seven years now. I honestly think
React is the future, but for now we can try to stick with MVVM and RxSwift
;-).

I think you're fundamentally not understanding how React (not just React-
native) works.

------
raspasov
Is the app live in the App Store? Would love to check it out!

~~~
tomtang2
We just submitted it to be approved, hopefully will be live soon.

~~~
raspasov
Great, good luck!

------
dj_doh
The biggest barrier to high fidelity ECMAScript apps on native platform is
simple economics. Apple is guaranteed a $99 bounty when you push something on
the appstore. Making Safari or WebView compatible with their native APIs and
performance is a risk for AppStore.

Having built 3 non-trivial iOS apps using phonegap and JavaScript. I have come
to the conclusion that I'm never going to build native apps using web stack. I
have struggled with API support, DOM limitations and performance.

Disclaimer: I have not tried react native.

I think it'll fail for mission critical and non-trivial apps. If you just want
an AppStore presence for your browser app or your app is trivial like one in
the post. You are probably going to be fine.

~~~
iLoch
You also appear to not know how it works. React Native doesn't use a web view
at all. It uses JavaScriptCore to process UI updates to native views.

~~~
dj_doh
Good luck sir getting web stack to work with native that's at par with
Swift/Obj-C perf. Also, do share some non-trivial apps that you/your team has
built using web stack on iOS.

p.s. I've explored JavaScriptCore the first day it was available to
developers.

p.p.s. I noticed you are a "React fanboy," so that's normal.

~~~
hamburglar
What exactly do you think is "web stack" about React Native? The fact that
there's javascript involved in the high level UI state code? I really don't
think you grasp the difference between React Native and the various "wrap a
web app" approaches.

~~~
dj_doh
I've dabbled with this JavaScript for native code since 2010-11. Appcelerator
Titanium SDK (now Appcelerator), Telerik, RubyMotion, Xamarin and of course
PhoneGap (including PhoneGap Build). I've not used Xamarin, but putting it
there to give a broader picture.

Please don't get me wrong, I'd love to use ECMAScript(, CSS and markup) to do
all web, native and server side development. Unfortunately they are marred by
poor API support, performance and customization. Last two are extremely
critical for non-trivial apps.

If you are building run of the mill simple apps like - news feed, photo, video
and reading etc. You'll be okay with anyone of the above 'web stack'.

Here's the litmus test. Ask the Reactive Native team to port their non-trivial
paper app or mission critical messenger app or main app to Reactive Native.
They are using Reactive Native for a lame duck Groups and some ad manager app.

JavaScriptCore is one layer deeper than wrapping a UIWebView, but it's several
layers from true native.

~~~
frontendbeauty
> Here's the litmus test. Ask the Reactive Native team to port their non-
> trivial paper app or mission critical messenger app or main app to Reactive
> Native.

Facebook is rewriting the News Feed in RN. That's not a trivial example.

~~~
dj_doh
Correct, it's not a trivial app by a long shot. Also, a validation for React
Native.

~~~
iLoch
> They are using Reactive Native for a lame duck Groups and some ad manager
> app.

"Some ad manager app" which happens to be the ad manager for one of the
largest advertising platforms on the planet right now. It's also composed of
non-trivial UI, you should try it before blindly bashing it. I've used both
Cordova, and Titanium, too, by the way - Cordova was relatively painless but
lacked the native feel. Titanium sort of had the native feel but it was slow.
The Titanium community also felt very hostile towards competition and they
didn't promote FOSS. Maybe you're a Titanium developer?

> Unfortunately they are marred by poor API support, performance and
> customization.

Web apps can hit 60fps these days (again, using React (Canvas)).

> Here's the litmus test. Ask the Reactive Native team to port their non-
> trivial paper app or mission critical messenger app or main app to Reactive
> Native.

That's a really lame litmus test considering they've got a massive code base
in native languages with no reason to throw them away since they're working
perfectly and they have a ton of developers to throw at the problem.

> They are using Reactive Native for a lame duck Groups and some ad manager
> app.

They appear to be using React Native for most _new_ apps that they develop. I
would assume it would be up to the discretion of the team to choose whether or
not to use React Native. Most do because React Native is way better than plain
old native. Even the author of UIKit thinks so.[0]

I'd be interested if you could provide a common real world example where React
Native wouldn't be a good fit.

Furthermore, React Native never claims to be a total replacement for native.
We openly acknowledge that some problems are best solved in native code.
That's why React Native has excellent support for 3rd party modules.

[0]
[https://twitter.com/andy_matuschak/status/560511204867575808](https://twitter.com/andy_matuschak/status/560511204867575808)

~~~
dj_doh
Okay how about one very, very simple question - Can I replace my all of my
Swift and iOS+tvOS+watchOS APIs with React Native? To make it easy for you.
Can I do that within next 1 year? What will happen when Apple will introduce a
slew of new APIs will be introduced in Sept?

Let's say I don't have any real world examples. I'm not seeing any engineering
marvel in React Showcase. [https://facebook.github.io/react-
native/showcase.html](https://facebook.github.io/react-native/showcase.html)
pales in comparison to [http://phonegap.com/app/](http://phonegap.com/app/)

------
haberman
What are good examples of high quality React Native apps I can try on my
iPhone?

Bonus if they are free.

~~~
vjeux
Take a look at the showcased apps on the React Native website:
[http://facebook.github.io/react-
native/showcase.html](http://facebook.github.io/react-native/showcase.html)

------
n0us
As for the styling part, This is actually a relief to see since I am using
Radium and it looks like some of the styles I have will work without any
modification. Any other styles I would have to rewrite anyway.

------
jkmcf
Does anyone remember Sun's DevGuide app development platform?

I used this in the 90s, and it was ridiculously easy to get write an
application. You visually designed your UI, generated code, and then added
your actions/event code. It was straight forward. I haven't seen anything come
close. Sure it was limited, but for the small apps I want to write for Mac and
iOS, it would be perfect.

------
supercoder
'I like react native because I don't have to learn swift' isn't the most
compelling argument for why to use it.

------
SonicSoul
this is great and timely! I was planning to do my first proof of concept in RN
this weekend in hopes to maybe use it in a hackathon next weekend. If anyone
has any other beginner resources that would be great, I've yet to even use
XCode :/

~~~
uptown
"I've yet to even use Xcode"

Boy are you in for a treat!

~~~
SonicSoul
sarcasm?

~~~
cellularmitosis
Yes. Since the release of Swift, Xcode has Ben notoriously crash-prone and
buggy. It is getting better slowly, but that was a pretty terrible first six
months.

------
jrbapna
For a startup still trying to find product-market fit and not building
anything intensive (ie mobile games), webview apps are the way to go. Build,
test, iterate quickly and fix bugs on the fly.

------
sjclemmy
I'm writing mobile apps using angular / Cordova and ionic. When they are
running on a device I can't tell the difference between a native app and a JS
Cordova one. I think JS is the future of mobile apps.

~~~
mikeryan
On what device? I've seen cordova apps work flawlessly on some and obviously
be webview apps on others.

------
flacoman91
really cool. I'd love to see a webcast on this.

