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.
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.
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 this chapter, we will take a look at:
- What React Native is all about.
- When it might be useful to include it in the tech stack.
This could prove helpful especially if you’re already developing a web app in React.
A brief history of React Native
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.
With that goal in mind, engineers from Facebook created a framework that could:
- render native User Interface components on both mobile platforms,
- eliminate the need for writing and maintaining two separate codebases.
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.
Key benefits of React Native
It’s a time-saver
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.
It lets you build native-like User Interfaces
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.
Giving that you follow the official guidelines, your final product can be almost indistinguishable from a native Swift/Objective-C or Java/Kotlin app.
It performs almost like native
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.
It has a thriving community
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.
React vs React Native – Comparison
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.
Platform specific code
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.
React Native’s key features for building cross-platform apps
Platform specific extensions
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.
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.
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.
It’s especially useful when you’re using components that contain only small parts of platform-specific code.
Converting from React web to React Native – what you need to know
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.
Sharing the code between web and mobile is not always easy
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.
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.
You may come across some compatibility issues
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.
Scalability may sometimes be a problem, too
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.
Examples of React Native in use
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.
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.
React Native is not for everyone
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.
When should you consider React Native?
- 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.
- 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.
- 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.
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.
This article is a part of Handbook:React Web Development: A Practical Guide for CTOs
Don't miss new chapters.
We'll be adding new in-depth content to this handbook very soon. Get it straight to your inbox.
React Web Development: A Practical Guide for CTOsFollow handbook