React Native vs Cordova vs Ionic

Nov.02.2017 | 2m Read | ^UX

You are using React, but maybe you want to move or port to mobile apps? React Native might be what you need. Or perhaps a hybrid approach like Apache's Cordova or the Ionic framework.

Everything is here to get started as a mobile app developer in 3, 2, 1...

React Native vs React:

  • ☑ Different imports, setup, and installation.
  • ☑ Different components.

▼ React Native has...

  • ☑⁡⁡ ⁡⁡More inline styling similar, but different to CSS.
  • ☑⁡⁡ ⁡Animated API for animation.
  • ☑⁡⁡ ⁡Uses PanResponder instead of touch events.
  • ☑⁡⁡ ⁡Navigator vs react-router.
  • ☑⁡⁡ ⁡iOS and Android specific code.
  • ☑⁡⁡ ⁡Apps published via XCode (iOS) or Android Studio (Android).

VS Cordova, Ionic (Hybrids):

    • ☑ React Native transpiles to Native C (Android) or Swift (iOS) code and has no auxillary purpose.
      ☑ Hybrids like Cordova often use a wrapper to wrap the web app onto the native app.
      ☑ React Native usually has better and more optimal performance since the goal is only Native (like no webview).
        ◆ ⁡This can be experienced both with loading and also component responsiveness.
        React Native itself is a hybrid app since it does not actually use Native C or Swift and is still built upon React.
      ☑ React Native is known for having better documentation.
  • RN Pros vs Native Languages:

    • ☑ Similar syntax in styling.
    • ☑ Similar backend.
    • ☑ Rapid prototyping.
    • ☑ Can easily apply Redux, Flux, and other React features for state management.
    • ☑ Better documentation.
    • ☑ Easier to back-translate to ReactJS for web apps.

    RN Cons vs Native Languages:

    • ☑ Limited library interaction.
    • ☑ Requires JNI plugin to use C.
    • ☑ Possibility of slower JavaScript code in the phone's VM (Virtual Machine).

    What to Use:

    • ☑ Use Ionic, Cordova, Flutter, or another hybrid for Rapid App Development, especially if you already have a web app.
    • ☑ Use React Native when you have extra time and team members to convert a web app for a performance boost.
    • ☑ Use Native SDKs: like in C or Swift when you require high performance or have specialized teams of native language programmers.

           : NEWS