In walks React Native.

I’ve kept a lazy eye on how far RN was coming along over the last year or so, with my only real experience being a half day hackathon at iress, my previous employer. We built a simple financial market data application for mobiles, hooked up to a GraphQL backend. I was pretty impressed how quickly we got it up and running, but I didn’t push the interest in RN any further.

But realising that we have two enthusiastic web devs itching to build cool stuff (myself included), and some heavily requested features to build for iOS — on paper RN seemed enticing.

That afternoon, we got into a room and bashed around a few ideas. 20 minutes later, and I’ve been given some time to explore if React Native would be suitable for our purposes.

Spoiler alert — I’m pretty psyched.

Second spoiler alert — I have 0 experience writing native mobile code. Swift means quick and Objective-C is an impartial Atlantic Ocean — I don’t know either of these programming languages 🤷.

But given sufficient quantities of caffeine, an internet connection and a block of time, I was ready to give this a whirl.

My first course of action was to type into google:

Integrate react native into existing iOS app

Apprehensively waiting for the internet’s council of elders to answer my call

And I found this.

I was excited.

Having had no idea whether this was doable or not — mish-mashing RN and native code — it was encouraging to find out it was possible.

So, I start following it. And I’m hitting walls everywhere.

The damn thing won’t compile. We have conflicting Podfile requirements, XCode is yelling at me to step up my game. It can’t find React when I try to import it in Swift — it has no idea what I’m talking about and refuses to take the time to understand my feelings. Yaaaaarg!

A half day’s head bashing condensed into a sentence: I had to use a version other than the latest ( 0.51.0 worked for us), and I had to trim the fat from our growing list of dependencies.

The blocker at this point was walking in the dark any time I had to write some native code. Luckily, our iOS engineer was able to unblock me quite a few times. We managed to add buttons in the right places that opened React Native Views. (I personally prefer portals into a magical javascript land where James feels comfortable and safe, but whatever.)

It started with this:

Which opened into the high scores screen from the guide

Yes, it’s 4:26am whilst I write this article. 🦉

The next step was to try build a feature that we’ve wanted in our iOS app for a while now, but haven’t had the capacity to prioritise. It’s our timeline/comment feed for talking to other people marking up a drawing.

If we were to build this without insane levels of difficulty, it would mean finding solutions to the following technical concerns:

Handling authenticated network IO without calling native code

Full or partial code reuse from our existing web app.

Performant integration of native components and react views

Ability to debug. (i.e — have a similar experience to developing on the web)

Ability to go back and forth easily between native and react views

Spoiler alert: I’ve ascertained that 4 out of 5 are possible, so far.

Once I was in the javascript runtime, my first goal was to see how easy it was to get data from our back end and display it on the screen.

It actually turned out to be pretty easy! The biggest hiccup was when I had to write some swift code to get the bearer token into the JS runtime, but again, our iOS engineer stepped in to unblock me.

Our web app is written 99% in a functional style, so code reuse was 2% copy-paste, 98% webpack/babel config magic. (I wanted absolute imports). This ticked box number 2. An important caveat is that view logic, because we have divs and spans everywhere, is not shareable at this point. This is fine for now, but we’ll probably have some hurdles to solve down the line if we’re super keen on the whole ‘write once’ idea. Think react-native-web.

And now we get to debugging. Yes, web-esque hot reloading debugging sorcery is doable! Out of the box too!

You just have to flick a few switches and you’re in the game. It’s incredible.