React Native is an open-source mobile application development framework for Android and iOS.

It leverages React, Facebook's renowned JavaScript library, for crafting seamless user experiences, albeit with a twist - it sets its sights on mobile platforms instead of the traditional web browser. There lies the real beauty of React Native, you get to code in JavaScript, HTML, and CSS. This is huge plus if you're primarily a web developer wanting to quickly create robust, production-ready apps for mobile platforms.

Like its web counterpart, React Native applications are constructed using a blend of JavaScript and the XML-inspired syntax, JSX. React Native then translates your markup into the native language of the platform you're working on. You can target either Objective-C or Swift for iOS and Java or Kotlin for Android.

History of React Native

The idea for React Native began in 2012 when Facebook engineers Jordan Walke and Christopher Chedeau started to work on a new approach to building mobile apps. They wanted to create a framework that would allow them to reuse their existing web development skills and tools to build high-quality mobile applications.

The first public release of React Native was in 2015, and it quickly gained popularity among developers due to its ability to create fast, responsive, and native-like mobile applications – more on that later.

React Native has gone through several updates and improvements over the years. It has gradually increased in popularity and currently has 1.5 million weekly npm downloads.

The framework has also spawned a large ecosystem of tools, libraries, and resources that make it easier for developers to build and deploy mobile applications using React Native.

React Native is most famously used by Meta to power their Instagram and Facebook apps. It has also been adopted by such companies as Uber Eats, Walmart, Palantir and Tesla, among others.

Why Choose React Native?

You've got a key decision to make when getting into mobile app development: whether you choose to code using the native languages either Android or IOs run on, or a cross-platform framework like React Native.

Complicating that choice still is the fact that cross-platform comes in a couple of different flavours, such as WebViews (Cordova, Ionic), widget-based systems (Flutter) and native rendering (React Native).

So, with a plethora of choice, why choose React Native?

You're already a React developer

This is probably the biggest factor. Any developer who knows how to write React code can now target the Web, iOS, and Android, all with the same skillset.

Yes! You can really use JavaScript to build production-ready mobile applications! The update cycle in React Native is the same as in React, where changes in props or state trigger a re-render of the views.

From an organizational perspective, removing the need to silo developers based on their target platform can reduce resourcing costs. It also promotes collaboration and knowledge sharing between React Web and React Native developers, which in turn can help the teams iterate more quickly and effectively.

Shared Codebase

React Natives'translation' process allows developers to create mobile applications for both iOS and Android from a single code base.

This can save a whole bunch of time compared to building and maintaining separate Swift or Java applications for each platform. Developers can easily make updates to the application and ensure that those changes are reflected across all platforms.

As a result, developers can focus on building high-quality apps that meet the needs of their users, without being bogged down by platform-specific details.

Renders Using the Host Platform's Standard Rendering APIs

When compiling to the target platform, React Native will use the native rendering APIs provided by the host platform to construct its UI and functionality.

This means that your app looks and feels just like a true native application.

This approach sets React Native apart from other cross-platform development methods that rely on Web Views such as Cordova or Ionic. They essentially display a website within an app to render the UI, which is significantly less performant than rendering native controls.

React Natives nearest competitor is currently Google's Flutter framework. Flutter works in a slightly different way as it uses its own collection of widgets to build out the user interface.

Flutter widgets are not dependent on the underlying platform's UI elements but are instead designed to look and behave consistently across all platforms. It essentially outputs its own pixels to the device's screen, offering more control over the app's appearance and behavior. Flutter's approach helps to ensure a consistent experience across different platforms.

By contrast, rendering to native views à la React Native, means that your app will look slightly different between devices but equally, look much more like an app that was programmed in native tech for those platforms. Developers can spot Flutter apps a mile away as they have a very unique feel.

If you want a native feel and don't mind some discrepancies between the IOs and Android versions of your app, React Native is the obvious choice.

Hot Reloading and Other Useful Development Features

If you're an experienced developer, you might be pleasantly surprised at how rich the development environment is on React Native.

The React Native team has incorporated robust developer tools and informative error messages into the framework, making it easy to work with, even for beginners.

Since React Native is based on JavaScript, you don't need to rebuild your application every time you make changes. Instead, you can refresh your application using a simple keyboard shortcut (Ctrl/Command + R), just like you would with any web page. This eliminates the need to spend precious time waiting for the application to rebuild, making the development process faster and more efficient.

In addition to its quick iteration cycle, React Native also provides powerful debugging tools and error reporting. If you're familiar with the developer tools in Chrome or Edge, you can use those same tools for mobile development as well. Similarly, you can choose your preferred text editor for JavaScript editing; React Native doesn't require you to work within Xcode for iOS development or Android Studio for Android development. My favorite is Visual Code.

Large and Active Community

React Native also has a large and active community of developers, so there are a ton of resources available for developers who are new to the framework. There are also many third-party libraries and tools that can be used to extend the functionality of React Native applications.

When would you not use React native?

React Native sure can do a lot! But there are certain scenarios where it may not be the best choice, particular over native platforms.

Performance-critical applications

While React Native can provide high-performance applications, it’s not super ideal for applications that require extremely fast performance, such as high-end games or complex 3D graphics applications.

This is because React Native relies on a bridge to communicate between JavaScript code and native platform code, which can introduce some overhead and performance issues.

In such cases, you can't beat going native and speaking directly to the platform in its own language.

Applications with complex animations or UI interactions:

For the reason above, it’s not great for applications that require complex animations or interactions may be easier to develop using platform-specific approaches.

Applications with heavy native functionality

If an application requires a lot of native functionality, such as access to low-level device features or hardware-specific functionality, it may be easier to implement these features using platform-specific approaches.

That was a brief intro! Stay tuned for a free React Native course, which will landing right here and accessible from this page in the coming weeks!