Search code examples
cordovareactjsreact-nativehybrid-mobile-app

Technological difference between react-native and cordova


What is the technological difference between "react-native" and "Apache Cordova"?

I have been working with Cordova for a while now and the way it works is, it creates a webview (a headless browser) and runs the application inside of it with various API access. I have been wondering if same is true for "react-native". Does "react-native" also create webview? or does it convert javascript code to native code?

If it creates a "webview" like Cordova, then what is the difference between a "Cordova + React" app and a "react-native" app (excluding the native-components that are provided by react-native)?

I know there is already an answer to this type of question here: Phone gap vs React Native. But my question is a bit different. Thank you.


Solution

  • Does "React-Native" also create webview?

    No. React Native is an abstraction to write native User Interfaces for Android and IOS. Your Javascript code runs in a Javascript runtime on the OS, but the UI is rendered as native components. This makes it very different than Cordova/PhoneGap.

    This is mentioned on the React Native webpage:

    Native Components

    With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.

    And explained in more detail in this blog post:

    Since React components are just pure, side-effect-free functions that return what our views look like at any point in time, we never need to read from our underlying rendered view implementation in order to write to it. In the browser environment, React is non-blocking with respect to the DOM, but the beauty of React is that it is abstract and not tightly coupled to the DOM. React can wrap any imperative view system, like UIKit on iOS, for example.

    So this means with a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. 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.