Why, hello there, React Native.

I am primarily an Objective-C kind of developer. I am currently dating and getting to know Swift. But let’s face it. When React Native walked into the party, there was a palpable hush in the room. Like many other iOS engineers, I was skeptical (in the way people tend to be): a lot of “It’s not that great” under my breath and “Silly webbers trying to get into native apps, ha!” and “I think it’s really important to build native apps in the right native way” even though I can’t necessarily speak to writing apps the right way. I’m not bitter, I swear.

However, I can’t deny that Facebook’s creation of React Native is a game changer for mobile development. It’s been in the game for only 2 years, and it’s already making strides. This is the first real bridge between not only the different mobile operating systems, but it makes mobile applications somewhat familiar ground for web developers. It looks like XML, structured sort of like CSS, compiles the code into Objective C, and somehow all works. In the simplest terms, it’s magic.

What is it?

React Native is a JavaScript framework for writing mobile applications for iOS and Android. It’s based on React, which is Facebook and Instagram’s JavaScript library for building user interfaces in web browsers. It’s using a mixture of JavaScript and XML-esque markup known as JSX. This is then rendered under the hood into native languages (Objective-C or Java) — you read that right, we aren’t embedding anything into a webview here.

Asynchrony

One of the more important features of React and React Native is it’s asynchronous execution. It works separately from the main UI thread, meaning it doesn’t run its rendering on the Main Queue. React Native automatically re-renders the UI when the state changes. By taking off the processing from the main thread, React Native can decode images, save to the disk, and implement the layouts without blocking the UI, making the app more responsive and fluid.

Styling

One of the huge benefits of React Native is how easy it is to lay out your views. Using the flexbox layout model from React, you can build the most common UI elements in stacks or nests with margins and padding. To web developers’ delight, Flexbox also supports common web styles (i.e. fontWeight). You assign styles to the StyleSheet abstraction that’s available in React Native and you assign that to objects inline.

Extensibility

Obviously React Native is meant to allow people to create apps without having to write a single line of native code, but Facebook and Instagram were smart enough to not limit that. You can create custom iOS modules and extend your app with custom native views. You can also import any of your favorite native libraries that have already been built. You simply have to implement the RCTBridgeModule protocol and wrap functions in RCT_EXPORT_MODULE( ). For importing custom views, you simply have subclass RCTViewManager, implement the -(UIView *)view method, and wrap exporting properties with RCT_EXPORT_VIEW_PROPERTY. For details on this, check out the React Native documentation.

Not gonna lie, it was weird when I first started building an app in React Native. I have primarily built apps in Objective C, and I only have maybe a year of experience with web development, so trying to piece it together was tough. But the first real solution, the first real language that is compatible with both iOS and Android means I’m just going to need to brush up on JavaScript and get working.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.