React Native

Source: React Native combines the best of native and web. Source: Choi 2017.
Source: React Native combines the best of native and web. Source: Choi 2017.

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?
    React Native framework includes a bridge between the JS world and native world. Source: Soral 2018.
    React Native framework includes a bridge between the JS world and native world. Source: Soral 2018.

    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 extends ReactJS. Source: Vijay 2017.
    React Native extends ReactJS. Source: Vijay 2017.

    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?
    Control flows across the bridge between native and JS worlds. Source: Bircan 2017.
    Control flows across the bridge between native and JS worlds. Source: Bircan 2017.

    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, or VirtualizedList could be used rather than ListView. 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:

Milestones

2011

At Facebook, Jordan Walke and his team release ReactJS, a JavaScript library that brings a new way of rendering pages with more responsive user interactions. A web page can be built from a hierarchy of UI components.

2013

React Native starts as an internal hackathon project within Facebook. Meanwhile, ReactJS is open sourced.

Mar
2015

Facebook open sources React Native for iOS on GitHub. The release for Android comes in September.

2016

Microsoft and Samsung commit to adopt React Native for Windows and Tizen.

2017

React Native sees a number of improvements over the year: better navigation, smoother list rendering, more performant animations, and more.

Sample Code

  • // Display lines of text with styling done in JS
// Source: https://facebook.github.io/react-native/docs/style.html
 
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
 
export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
 
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
 

References

  1. Ashwini, Amit. 2017. "What Is The Difference Between React.js and React Native?" Cognitive Clouds, September 9. Accessed 2018-06-08.
  2. Belitsoft. 2017. "React Native Advantages." Belitsoft, December 20. Accessed 2018-06-08.
  3. 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.
  4. Boiko, Kateryna. 2017. "Affordable React Native Mobile App Development." InfoQ, July 19. Accessed 2018-06-08.
  5. Choi, Eugene. 2017. "Why we use React Native for mobile app development." Altitude Labs Blog, August 1. Accessed 2018-06-12.
  6. Expo GitHub. 2020. "expo/create-react-native-app." Expo, on GitHub, July 21. Accessed 2020-07-21.
  7. Fastrich, Kate. 2018. "Migrating To React Native: Top Case Studies From Well-Known Companies." Belitsoft, January 23. Accessed 2018-06-08.
  8. Knyga, Oleksandr and Sharmeen Hayat. 2017. "React Native vs Real Native Apps." Weblab Technology, at codeburst.io, November 2. Accessed 2018-06-11.
  9. Mangin, Alexis. 2016. "What are the main differences between ReactJS and React-Native?" Medium, December 28. Accessed 2018-06-08.
  10. Muhsin, Muhammad. 2018. "Building Mobile Apps Using React Native And WordPress." Smashing Magazine, May 11. Accessed 2020-07-21.
  11. Peal, Gabriel. 2018. "React Native at Airbnb." Medium, June 19. Accessed 2018-06-20.
  12. 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.
  13. React Native Docs. 2018b. "Who's using React Native?" React Native, v0.55. Accessed 2018-06-08.
  14. React Native Docs. 2018c. "Animations." React Native, v0.55. Accessed 2018-06-08.
  15. React Native Docs. 2018d. "Platform Specific Code." React Native, v0.55. Accessed 2018-06-08.
  16. Shah, Hardik. 2017. "React Native Performance: Major issues and insights on improving your app’s performance." Simform, November 16. Accessed 2018-06-11.
  17. Shoutem. 2016. "A brief history of React Native." Medium, October 3. Accessed 2018-06-08.
  18. Soral, Rakshit. 2018. "React Native vs Ionic: Comparing performance, user experience and much more." Simform, February 28. Accessed 2018-06-08.
  19. 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.
  20. Vercammen, Jasper. 2017. "React Native: a brief history." icapps, December 4. Accessed 2018-06-08.
  21. Vijay, Tushar. 2017. "What advantages do you get with React-Native over ReactJS?" Konstant Infosolutions, October 25. Accessed 2018-06-08.
  22. Willoughby, John. 2017. "The Top 5 Benefits of React that Make Life Better." Progress Telerik, December 6. Accessed 2018-06-08.

Further Reading

  1. React Native Docs. 2018a. "Getting Started." React Native, v0.55. Accessed 2018-06-08.
  2. Heard, Pete. 2017. "React Native Architecture : Explained!" Logic Room, June 13. Accessed 2018-06-12.
  3. Grigoryan, Alex. 2017. "Electrode Native: The Platform For Integrating React Native Into Your Apps." Medium, September 29. Accessed 2018-06-08.
  4. Papp, Andrea. 2018. "The History of React.js on a Timeline." Rising Stack, March. Accessed 2018-06-08.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
Avatar of user gurumoorthyP gurumoorthyP
6
0
1833
Avatar of user arvindpdmn arvindpdmn
2
0
229
Avatar of user devbot5S devbot5S
1
0
11
DevCoins due to articles, chats, their likes and article hits are included.
1482
Words
3
Authors
9
Edits
0
Chats
5
Likes
15K
Hits

Cite As

Devopedia. 2022. "React Native." Version 9, February 15. Accessed 2024-06-25. https://devopedia.org/react-native
Contributed by
3 authors

Last updated on
2022-02-15 11:49:06
mobile web framework framework javascript

See Also