Despite the similar names, React and React Native are completely different and serve various purposes. However, combining them in your project leads to strong benefits. The comparison below explains it.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
Judging from the name alone you could say React Native is React’s younger sibling.
But it’s not that simple.
While React is a library for building web user interfaces and components, React Native is a framework dedicated to cross-platform mobile development.
<span class="colorbox1" fs-test-element="box1"><p>Key take-away: The primary difference between React vs React Native is that the first one is a library for web UIs, while the latter a framework for cross-platform mobile apps.</p></span>
Although React Native incorporates most of the features of React, it also serves as an additional layer with a specific focus on building mobile apps.
In React Native you’re still basically writing a React code – but this time with a framework that acts as a bridge between JavaScript and native components, letting you run your app both on iOS and Android.
In this chapter, we will take a look at:
This could prove helpful especially if you’re already developing a web app in React.
React Native first started as an internal project at Facebook’s 2013 hackathon. The idea was to develop a React-based framework that would allow for more efficient development of mobile apps on iOS and Android.
Think of it this way: if you could build native-like mobile apps just by sharing and reusing one JavaScript code, the whole process of developing and maintaining your product would undoubtedly become much easier.
With that goal in mind, engineers from Facebook created a framework that could:
They called it React Native and made it open and available on GitHub in 2015, after roughly two years of work.
Since the framework’s open-source release in 2015, it has skyrocketed in popularity and continues to be widely adopted both by startups and big companies. And there are some good reasons for that.
React Native still uses React for base abstraction, but the framework’s components are different and styled in a way that resembles iOS and Android user interfaces.
React Native makes the whole process of coding, deploying and fine-tuning a cross-platform product much faster. It lets you build native apps for iOS and Android without the need to run separate development teams and manage separate codebases.
This way you can get much more out of your time and budget. Time saving is the most common reason why custom software development companies choose to develop apps with React Native.
This is crucial from a user perspective. After all, you want your app to feel not only smooth, but also familiar and easy to use from the get-go.
By using platform-specific JavaScript stylesheets, React Native lets you build User Interfaces that look and feel just like native.
Giving that you follow the official guidelines, your final product can be almost indistinguishable from a native Swift/Objective-C or Java/Kotlin app.
Although React Native isn’t a mobile native language, it lets you achieve a near-native performance and optimize it even further by including native code in some areas of your app.
In fact, community is what drives React Native forward and makes this framework future-proof.
There’s lots of useful information and helpful fixes on the web, as well as many open source pieces of code that sometimes can prove game-changing.
Although at their cores React Native and React are very similar, there are some major differences between them.
While React JS uses Virtual DOM for rendering code, React Native is a framework that acts as a bridge and runs components and features with special native APIs.
React Native doesn’t use HTML, but instead has its own syntax (e.g. <Text> instead of <p> and <View> instead of <div>). It also has an in-built animation library and relies upon CSS-in-JS to style UI components instead of regular CSS.
When coding web apps in React, you have to use external libraries (such as react-router) to build navigation features and transition between pages.
With React Native building User Interface is a lot less hassle. It provides its own Navigator component that lets you easily customize your mobile app’s navigation and create smooth, native-like animations and transitions that should feel familiar both to iOS and Android users.
If you’re not creating a really complex mobile app with lots of different scenes, you won’t really need to look for any external libraries.
Unlike React, React Native addresses the need to write different code for different platforms and build apps that follow platform-specific UI and UX guidelines.
It no longer requires you to organize components in separate folders or name them accordingly.
Instead, React Native offers two alternative ways to build cross-platform apps more efficiently.
<span class="colorbox1" fs-test-element="box1"><h4>React Native’s key features for building cross-platform apps</h4><p><strong>Platform specific extensions</strong></p><p>React Native will load matching files for a specific platform by automatically detecting whether the file you’re working on has a .ios.js or .android.js extension.</p><p>This way you can be sure that each time you’re coding for iOS or Android, React Native will always import the correct required component.</p><p><strong>Platform module</strong></p><p>React Native provides a module called Platform to detect which platform (or which version of a platform, if you’re developing for Android) the app is currently running.</p><p>It’s especially useful when you’re using components that contain only small parts of platform-specific code.</p></span>
If you’re thinking about converting your React-based web app into a mobile app for both Android and iOS devices, React Native is a natural choice and one of the most time efficient ways to do it.
You can also work the other way around and turn a React Native mobile app into a web one by converting it to React.
However, you need to remember that for the process to go smoothly, in both cases you’re going to need a specialized team of developers who know React and React Native’s ins and outs. Being proficient only in one won’t be enough.
There are a couple of reasons.
Root components and base logic of the app are the same for React and React Native, as both are using JavaScript.
However, if you want to convert your React-based web app into a React Native mobile app, you’ll still need a team that knows how to use platform-specific components. Not every React developer will feel comfortable porting an app to React Native, because the latter still requires some knowledge of bridging native code.
Same goes for converting a React Native app to React. You can use react-native-web to bring a mobile app to the browser, but it requires some significant modifications to perfect your port as well as some adjustments in the user interface.
<span class="colorbox1" fs-test-element="box1"><p>Bottom line: Sharing a codebase goes beyond simply reusing code. The React/React Native porting process can get really complex and sometimes it’s easier to develop web and mobile apps separately.
It all depends on the type of app you’re building and the specific features you want to include.</p></span>
This is yet another reason why you need a development team that’s proficient in React Native. Some component libraries and debugging tools may require additional attention and could potentially slow down the whole process.
Don’t get us wrong – React Native should work great if you’re planning to grow your cross-platform app with time. That said, it requires some thoughtful planning when it comes to the app architecture.
Some of those choices should be made right from the start, so if you want to develop your web and mobile apps simultaneously and have a long-term strategy, sometimes it might be better to develop from scratch using libraries such as React Native for Web or ReactXP, instead of converting between React and React Native.
Facebook’s in-house framework seemed perfectly suitable for a lot of complex business logic required to accurately handle different ad formats, time zones, currencies, date formats, and currency conventions.
Migrating the app to React Native was easy due to the fact that a big chunk of it was already drafted in JavaScript.
Instagram integrated React Native into their existing native app beginning from the Push Notification view, which was basically implemented as WebView.
What’s important, it did not require building navigation infrastructure from scratch, as the base UI was quite simple and could easily be implemented with new React Native components.
Bloomberg’s new mobile app for iOS and Android gives users a streamlined, interactive experience with simple-to-access personalized content, videos and live feeds featured across Bloomberg’s Media.
To develop the application, the company employed a unique mobile app development framework.
Uber used React Native components to build a mobile dashboard for choosing meals and restaurants and implemented it with useful features such as push notifications. This made ordering food via UberEats intuitive and easy.
So far we’ve discussed the differences between React vs React Native, explained what are the pros and cons of the latter, and shown examples of its implementation.
Coming to the conclusion of this article we have to answer the fundamental question – when is it a good idea to use React Native? We’ve created a cheat-list that will help you determine whether it’s the right choice for your business.
<span class="colorbox1" fs-test-element="box1"><h3>When should you consider React Native?</h3><ol><li>When you want to build an app that works both on web and mobile. Developing with React (for web) and React Native (for mobile) may not be a fully single-codebase approach, but due to many similarities between the two tech stacks, it’s still one of the most efficient ways to build a cross-platform product.</li><li>When you want to convert your web app to a mobile app. You’re still however going to need a development team that’s proficient in both React and React Native. Knowing only one of them won’t be enough. </li><li>When you want to develop a mobile app for both Android and iOS. React Native is a framework that could render native User Interface components on both mobile platforms, so you don’t need to write and maintain two separate codebases.</li></ol></span>
If you want to learn more about React from a business perspective or compare it with other similar technologies, read the next chapter of this handbook.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Software engineering & writing passionate, with 2 years of experience in the tech industry.
Software engineering & writing passionate, with 2 years of experience in the tech industry.
Read next
Popular this month
previous article in this collection
It's the first one.
