React Native vs Native (iOS, Android)
Properties/Feature
|
React Native
|
Native (iOS) –
Swift / Objective C
|
Native (Android) –
Java / Kotlin
|
Development
Environment Setup Steps
|
In addition
to Node server Development environment, Native Development Tools (iOS and
Android) would also be required. As it
doesn’t completely remove the need of going native. Online Development
using browser without any system setup is also possible using https://snack.expo.io |
Requires
just installing XCode from Apple App Store as per this URL- https://developer.apple.com/xcode/ |
Simple Installation
steps (see URL below for details): https://developer.android.com/studio |
Development Tools
|
Tooling mostly based
on open source projects and comparatively less advanced than that for native
development Developers can choose
from many Web Development Tools React Native
extension for Visual Studio is very popular. |
XCode - Good support
from Apple. Mostly Proprietary
from the platform vendors. |
Android Studio - Good
support from Google. Mostly Proprietary
from the platform vendors. |
Multi-Threading
Support
|
No (React
Native Core is currently based on single threaded JavaScript). However
parallel execution with hamsters.io is also possible |
Yes (https://developer.apple.com/documentation/dispatch)
|
Yes (https://developer.android.com/training/multiple-threads) |
Refactoring &
Static code analysis
|
Refactoring is
difficult (due to JavaScript). Using TypeScript can
bring in support for advanced refactoring and static code analysis along with
advanced development tools. React Native projects
may also include code written in ObjectiveC/Swift for iOS and Java/Kotlin for
Android. |
XCode has good
Refactoring Support for both Swift and Objective C. |
Android Studio has good
Refactoring Support for Kotlin and Java. |
Low Level Hardware
Access
|
No |
Yes |
Yes |
Cross Platform
|
Code Sharing possible
between iOS and Android. JavaScript could be
slightly inconsistent on platforms or you may want different UX in different platforms
(requiring platform specific React Native coding) |
Targets only Apple
Devices |
Targets only Android
Devices |
App Center Code
Push
|
Can be
quickly updated via Code Push without involving App Store |
No (Requires
tedious App Store approval process for submitting an app updates with bug
fixes or new features.) |
No (Users
needs to update the app via Play Store for getting latest updates from the
app developer) |
Faster Development[AB1] [TT2] [TT3]
|
Yes (Due to following
Reasons) -
JavaScript & JSX usually requires lesser
lines of code -
React Native Code Updates could push
faster to clients (both Dev and Prod) using features like Hot code reload or
code push updates. -
Debugging & Development Tools are Faster
-
Plenty of Code Generators and
Boilerplate code Templates -
You may also need some platform
specific code which will be bundled for iOS or Android specific bundles. |
No |
No |
Hot Reload
Supported
|
Yes (Saving
code changes reflects immediately in Device) Using live
reloading the app could be reloaded every time the code is changed without
having to rebuild it manually. |
No |
No [AB4] [TT5] [TT6] (Instant Run for Android is similar but for many
cases it might need Cold Swap or Warm Swap, where reload of Activity and
Application is required). Refer: https://medium.com/google-developers/instant-run-how-does-it-work-294a1633367f#.8j91tz11c |
Simpler Component
Lifecycle
|
React Component
Lifecycle: https://levelup.gitconnected.com/componentdidmakesense-react-lifecycle-explanation-393dcb19e459 |
iOS Component
Lifecycle: |
Android Component
Lifecycle: https://developer.android.com/guide/components/images/activity_lifecycle.png |
Platform Maturity
|
~ 5 years |
10+ years |
10+ years |
Runtime Initialization
& Initial Render Time
|
React Native Bridge
API is required to communicate between react native and native. Initialization Time
(runtime needs to be initialized) — it’s difficult to use in launch screens. |
Faster |
Faster |
CPU & GPU Usage
|
React-Native
uses the GPU of the iPhone slightly more effectively than Swift |
Swift uses
the CPU of the iPhone more efficiently than React-Native (See URL
below) |
Lower than
React Native (See URL
below) |
Memory Usage
|
React-Native somehow leverages
the iPhone’s memory much more effectively than Swift does |
Comparing Performance
between Native iOS with Swift and React Native |
Marginally Lower than
React Native |
Crash Log
|
Crash
Monitoring (third party tools like https://www.bugsnag.com/ might be
required) |
Supported
by iOS Platform |
Supported
by Android Platform |
Debugging Across
Platforms
|
Debugging React
Native crashes are more challenging if the issue spanned across React Native
and native code as stack traces won’t jump between React Native and native. |
Not Required |
Not Required |
Gesture Supports
|
Low |
Better |
Better |
App Size
|
Slightly bigger (by ~
8MB) than Native App. There is an ongoing Lean
Core initiative to reduce it. https://github.com/facebook/react-native/issues/23313 |
Usually smaller than
that of React Native App |
Usually smaller than
that of React Native App |
Required
Development Skills
|
Web (HTML,
CSS and JavaScript) and React (including Node) Development along with some
native mobile app development. React
Native enables Learn-once/write-one-ish/run-many strategy for delivering
functionality to our customers. |
Swift and
Objective C |
Kotlin and
Java |
References
·
React Native at Airbnb - https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
·
The (not so) hidden cost
of sharing code between iOS and android - https://blogs.dropbox.com/tech/2019/08/the-not-so-hidden-cost-of-sharing-code-between-ios-and-android/
·
React Philosophy & Patterns
o
https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82
o
http://krasimirtsonev.com/blog/article/getting-from-redux-to-state-machine-with-stent
Android Studio has a feature called Instant Run that is able to apply some changes without building a new APK. [AB4]
