React Native
- Summary
-
Discussion
- As a developer, why should I adopt React Native?
- How is React Native different from ReactJS?
- How does React Native work under the hood?
- What are some useful developer features of React Native?
- How does React Native compare against platforms in terms of performance?
- Are there real-world examples of who's using React Native?
- What backend should I use for my React Native app?
- Could you point me to some useful React Native developer resources?
- Milestones
- Sample Code
- References
- Further Reading
- Article Stats
- Cite As
Traditionally, native mobile apps have been developed in specific languages that call platform-specific APIs. For example, Objective-C and Swift for iOS app development; Java and Kotlin for Android app development. This means that developers who wish to release their app on multiple platforms will have to implement it in different languages.
To avoid this duplication, hybrid apps came along. The app was implemented using web technologies but instead of running it inside a web browser, it was wrapped and distributed as an app. But it had performance limitations.
React Native enables web developers write code once, deploy on any mobile platform and also use the platform's native API. React Native is a platform to build native mobile apps using JavaScript and React.
Discussion
-
As a developer, why should I adopt React Native? Since React Native allows developers maintain a single codebase even when targeting multiple mobile platforms, development work is considerably reduced. Code can be reused across platforms. If you're a web developer new to mobile app development, there's no need to learn a new language. You can reuse your current web programming skills and apply them to the mobile app world. Your knowledge of HTML, CSS and JS will be useful, although you'll be applying them in a different form in React Native.
React Native uses ReactJS, which is a JS library invented and later open sourced by Facebook. ReactJS itself has been gaining adoption because it's easy to learn for a JS programmer. It's performant due to the use of virtual DOM. The recommended syntax is ES6 and JSX. ES6 brings simplicity and readability to JS code. JSX is a combination of XML and JS to build reusable component-based UI.
-
How is React Native different from ReactJS? React Native is a framework whereas ReactJS is a library. In ReactJS projects, we typically use a bundler such as Webpack to bundle necessary JS files for use in a browser. In React Native, we need only a single command to start a new project. All basic modules required for the project will be installed. We also need to install Android Studio for Android development and Xcode for iOS development.
In ReactJS, we are allowed to use HTML tags. In React Native, we create UI components using React Native components that are specified using JSX syntax. These components are mapped to native UI components. Thus, we can't reuse any ReactJS libraries that render HTML, SVG or Canvas.
In ReactJS, styling is done using CSS, like in any web app. In React Native, styling is done using JS objects. For component layout, React Native's Flexbox can be used. CSS animations are also replaced with the Animated API.
-
How does React Native work under the hood? Between native and JavaScript worlds is a bridge (implemented in C++) through which data flows. Native code can call JS code and vice versa. To pass data between the two, data is serialized.
For example, a UI event is captured as a native event but the processing for this is done in JavaScript. The result is serialized and sent over the bridge to the native world. The native world deserializes the response, does any necessary processing and updates the UI.
-
What are some useful developer features of React Native? React Native offers the following:
- Hot Reloading: Small changes to your app will be immediately visible during development. If business logic is changed, Live Reload can be used instead.
- Debugging: Chrome Dev Tools can be used for debugging your app. In fact, your debugging skills from the web world can be applied here.
- Publishing: Publishing your app is easy using CodePush, now part of Visual Studio App Center.
- Device Access: React Native gets access to camera, sensors, contacts, geolocation, etc.
- Declarative: UI components are written in a declarative manner. Component-based architecture also means that one developer need not worry about breaking another's work.
- Animations: For performance, these are serialized and sent to the native driver. They run independent of the JS event loop.
- Native Code: Native code and React Native code can coexist. This is important because React Native APIs may not support all native functionality.
-
How does React Native compare against platforms in terms of performance? Since React Native is regularly being improved with each release, we can except better performance than what we state below.
A comparison of React Native against iOS native programming using Swift showed comparable performance of CPU usage for list views. When resizing maps, Swift was better by 10% but React Native uses far less memory here. For GPU usage, Swift outperforms marginally except for list views.
React Native apps can leak memory. Therefore,
FlatList
,SectionList
, orVirtualizedList
could be used rather thanListView
. The communication between native and JS runtimes over the bridge is via message queues. This is also a performance bottleneck. For better performance, ReactNavigation is recommended over Navigator component.When comparing against Ionic platform, React Native outperforms Ionic across metrics such as CPU usage, memory usage, power consumption and list scrolling.
-
Are there real-world examples of who's using React Native? Facebook and Instagram use React Native. Other companies or products using it include Bloomberg, Pinterest, Skype, Tesla, Uber, Walmart, Wix, Discord, Gyroscope, SoundCloud Pulse, Tencent QQ, Vogue, and many more.
Walmart moved to React Native because it was hard to find skilled developers for native development. They used an incremental approach by migrating parts of their code to React Native. They were able to reuse 95% of their code between iOS and Android. They could reuse business logic with their web apps as well. They could deliver quick updates from their server rather than an app store.
Bloomberg developed their app in half the time using React Native. They were also able to push updates, do A/B testing and iterate quickly.
Airbnb engineers write code for the web, iOS and Android. With React Native, they stated,
It's now feasible for us to have the same engineer skilled in JavaScript and React write the feature for all three platforms.
However, in June 2018, Airbnb decided to move away from React Native and back to native development due to technical and organizational challenges.
-
What backend should I use for my React Native app? React Native provides UI components. However, the React Native ecosystem is vast. There are frameworks/libraries for AR/VR, various editors and IDEs that support React Native, local databases (client-side storage), performance monitoring tools, CI/CD tools, authentication libraries, deep linking libraries, UI frameworks, and more.
Specifically for backends, Mobile Backend as a Service (MBaaS) is now available. Some options include RN Firebase, Baqend, RN Back, Feather and Graph Cool. These services make it easy for developers to build their React Native apps.
The more traditional approach is to build and manage your own backend. Some developers choose Node.js or Express.js because these are based on JavaScript that they're already using to build React Native UI. This can be paired with a database such as Firebase, MySQL, or MongoDB. Another option is to use Django with GraphQL. Even WordPress can be used, especially if the app is content driven. These are merely some examples. Developers can use any backend that suits their expertise and app requirements.
-
Could you point me to some useful React Native developer resources? Here are some useful resources:
- Expo is a free and open source toolchain for your React Native projects. Expo also has a collection of apps developed and shared by others. The easiest way to create a new app is to use the create-react-native-app codebase.
- If you wish learn by studying app code written by others, React Active News maintains a curated list of open source React Native apps.
- React.parts is a place to find reusable components for React Native.
- Visual Studio App Center is a useful tool to build and release your app.
- Use React Navigation for routing and navigation in React Native apps.
- React Native provides only the UI but here's a great selection of tools to complement React Native.
Milestones
2015
Sample Code
References
- Ashwini, Amit. 2017. "What Is The Difference Between React.js and React Native?" Cognitive Clouds, September 9. Accessed 2018-06-08.
- Belitsoft. 2017. "React Native Advantages." Belitsoft, December 20. Accessed 2018-06-08.
- Bircan, Korhan. 2017. "Cross-Platform Mobile App Development with Flutter – Xamarin – React Native: A Performance Focused Comparison." LinkedIn Pulse, August 6. Accessed 2018-06-13.
- Boiko, Kateryna. 2017. "Affordable React Native Mobile App Development." InfoQ, July 19. Accessed 2018-06-08.
- Choi, Eugene. 2017. "Why we use React Native for mobile app development." Altitude Labs Blog, August 1. Accessed 2018-06-12.
- Expo GitHub. 2020. "expo/create-react-native-app." Expo, on GitHub, July 21. Accessed 2020-07-21.
- Fastrich, Kate. 2018. "Migrating To React Native: Top Case Studies From Well-Known Companies." Belitsoft, January 23. Accessed 2018-06-08.
- Knyga, Oleksandr and Sharmeen Hayat. 2017. "React Native vs Real Native Apps." Weblab Technology, at codeburst.io, November 2. Accessed 2018-06-11.
- Mangin, Alexis. 2016. "What are the main differences between ReactJS and React-Native?" Medium, December 28. Accessed 2018-06-08.
- Muhsin, Muhammad. 2018. "Building Mobile Apps Using React Native And WordPress." Smashing Magazine, May 11. Accessed 2020-07-21.
- Peal, Gabriel. 2018. "React Native at Airbnb." Medium, June 19. Accessed 2018-06-20.
- Quora. 2020. "What should be the technology stack to develop a mobile app using React Native? What should be the server-side technology or middleware and which database to use?" Quora. Accessed 2020-07-21.
- React Native Docs. 2018b. "Who's using React Native?" React Native, v0.55. Accessed 2018-06-08.
- React Native Docs. 2018c. "Animations." React Native, v0.55. Accessed 2018-06-08.
- React Native Docs. 2018d. "Platform Specific Code." React Native, v0.55. Accessed 2018-06-08.
- Shah, Hardik. 2017. "React Native Performance: Major issues and insights on improving your app’s performance." Simform, November 16. Accessed 2018-06-11.
- Shoutem. 2016. "A brief history of React Native." Medium, October 3. Accessed 2018-06-08.
- Soral, Rakshit. 2018. "React Native vs Ionic: Comparing performance, user experience and much more." Simform, February 28. Accessed 2018-06-08.
- Soral, Rakshit. 2018b. "Exploring React Native Ecosystem – Tools, backend, database and best libraries." Blog, Simform, April 18. Updated 2020-05-01. Accessed 2020-07-21.
- Vercammen, Jasper. 2017. "React Native: a brief history." icapps, December 4. Accessed 2018-06-08.
- Vijay, Tushar. 2017. "What advantages do you get with React-Native over ReactJS?" Konstant Infosolutions, October 25. Accessed 2018-06-08.
- Willoughby, John. 2017. "The Top 5 Benefits of React that Make Life Better." Progress Telerik, December 6. Accessed 2018-06-08.
Further Reading
- React Native Docs. 2018a. "Getting Started." React Native, v0.55. Accessed 2018-06-08.
- Heard, Pete. 2017. "React Native Architecture : Explained!" Logic Room, June 13. Accessed 2018-06-12.
- Grigoryan, Alex. 2017. "Electrode Native: The Platform For Integrating React Native Into Your Apps." Medium, September 29. Accessed 2018-06-08.
- Papp, Andrea. 2018. "The History of React.js on a Timeline." Rising Stack, March. Accessed 2018-06-08.
Article Stats
Cite As
See Also
- React
- React Native Firebase
- Testing React Native Apps
- Types of Mobile Apps
- Web Components
- Declarative Programming