React Native is the biggest technology available for iOS developer, since 2015.
It provides a new platform for iOS development, in the very popular (and familar language for web developers) - JavaScript.
This post is about learning/considering React Native for an iOS/Swift developer.
This post is not a development guide, because the official Getting started is good, and Ray Wenderlich provided a great guide for Swift iOS developers.
Instead, I will highlight important considerations for Swift iOS developers.
Why use React Native?
Instead of pure iOS/Android native development, React Native has the following benefits:
- Render native UI (NOT web view), thus good user experience
- Learn once, write anywhere (on both iOS & Android)
- Similar set of technology stack (JavaScript + React + millions of JS libs) with web developers
- JavaScript developers readily available, as compared to Swift/Android/Java
I usually do not advocate non-native technology, because there are limitations and extra bugs because of the intermediary platform.
But React Native is created by Facebook, and they use it in Facebook app too, so there is lesser risk.
Not zero risk, because you should know Facebook kills Parse etc too..
Warning: JavaScript World
Before we dived into React Native, let me warn you if you are a JavaScript newbie like me.
JavaScript world is very messy.
How messy? See this conversation.
The ecosystem is too healthy, with lots of JS frameworks popping up and taking over the world, quickly. Check out the state of JS in 2016. There will be many frameworks that you need to learn, from everyone.
How React Native Works?
In Facebook’s March 2015 release post:
The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it in an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components.
JavaScriptCore is a framework provided on iOS/Android to run JavaScript.
React Native runs the JavaScript in JavaScriptCore, and then render the native UI views on the platform.
The Trigger Point
In AppDelegate, there is boilerplate code that specify where to load the JavaScripts.
The NSURL either points to:
- http://localhost:8081 or
- NSBundle
Loading JavaScript remotely from a URL is interesting, because then, it is possible to code push to live apps!
Flexbox for UI layout
No more messing around with autolayout.
Flexbox is a simple way, specifying a weight value for the components, the flow direction, and the alignment.
You will be glad that Boostrap 4 will use flexbox way, instead of the regular grid system they started with.
Persistant Storage
You can use AsyncStorage for simple key-value data, just like NSUserDefault.
For database, you could use Realm! No more Core Data!
Migrating an existing Swfit project
You can have a hybrid of native and react native.
To integrate react native into an existing project, follow raywenderlich’s guide. Facebook’s official guide is lacking, and outdated for the dependencies version. As of Dec 2016, I updated the version to:
"dependencies": {
"react": "15.3.1",
"react-native": "0.34.0"
}
You can update accordingly, but things move fast so if your project doesn’t compile, then it could be the versions (and Xcode/iOS) incompatibility.
One particular point missing in Facebook’s guide is how to run without depending on the packager running on eg. http://localhost:8081. Read on.
Bundling JS in App
React Native provided a script - react-native-xcode.sh - to build and bundle the JS and all resources you need into your app.
When integrating into an existing app, you have to add a New Run Script Phase with the following:
export NODE_BINARY=node
./path/to/node_modules/react-native/packager/react-native-xcode.sh
Edit the path to react-native-xcode.sh as necessary.
You will also need to edit/add your scheme’s Build Configuration to Release.
Tip: If you are using fastlane, need not worry because the default of gym is to use Release configuration, even if the scheme is set to Debug.
Navigation
Let’s take a look on a very basic UI subject. In iOS, we have UINavigationController.
In React Native, it gets complicated and there are more choices:
- Facebook’s out of the box Navigator
- Facebook’s abandoned NavigatorIOS
- WIX’s react-native-navigation
There are lots of community contributions, and once you found the library that is suitable for your requirement, you could use it easily.
macOS too
Not only for mobile, but you could learn once, and write for desktop app too.
IDE
Facebook has their own “IDE” - nuclide - which is plugin for Atom.
What about type?
One of the cons of JavaScript (compared to Swift) is that there is no type safety built into the language.
If you prefer to deal with types (which you should, trust me), then you should use Flow.
# Install flow globally so that it is added to PATH
npm install -g flow-bin
I would recommend to setup Flow when you begin a project, because it gets harder to migrate non-flow app later on.
What about TypeScript?
TypeScript provides typing and optionals, in a new language of it’s own.
I would choose to use TypeScript, if I had more experience with JavaScript (especially with the new ES2015). But being a newbie to JavaScript, it is better to learn the intricates of the language.
What’s more, most examples and libraries will be in pure JavaScript.
And compared to Flow, Facebook has preference for Flow. The react library has Flow annotations.
So my advise is to avoid TypeScript. But it is possible to use, just saying.
Project Generator
ignite is extension of yeoman.
Generate a best-practised project structure with state of the art setup.
What is not so great?
- Dependency on another technology stack
- You will not be able to use the latest iOS technology
- Swift is nicer than JavaScript
More Resources
awesome-react-native - List of great libraries
F8 - Facebook conference app - written in react native, fully open sourced
js.coach - Discover more JS
Localization library