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?
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.
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.
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.