The CTO's Guide to React Native in 2024

This is an updated version of our CTO's Guide to React Native in 2024.

‍

For CTOs considering or using React Native – and for the simply curious

‍

React Native is about to break the sound barrier

‍

Here’s what CTOs need to know

‍

Whether you’re hands-on in code or keep more of an overview of your team’s tech strategy, you’ve probably noticed that the React Native ecosystem is moving quickly. 

‍

It’s evolving from one of many app frameworks to the potential benchmark for app and web development, and everyone’s looking ahead to where it’s going next.

With all the rage about new architecture and languages to product suites that are unlocking so much of React Native’s potential, there are plenty of changes in the pipeline for 2024. 

If React Native is on your radar, you’re planning to switch, or if you’re already using it and don’t want to get caught out, you need to know what’s coming and how to start planning for it now.

‍

If you’re considering React Native, here’s what you need to know

‍

React Native has long been the choice for mobile…

‍

Cross-platform –  React Native allows you to use a single code base that can be deployed to iOS and Android. This results in a more consistent UI, and it means you only need to find a team of developers with a single skillset to create what you need. It’s not a binding contract, either. 

Development speed – Compared to other cross-platform frameworks like Flutter, React Native blazes ahead for two reasons: lightning-fast over-the-air updates, made possible through Expo, and Expo Application Services. These are optimised-for-React-Native cloud services that speed development along while maintaining stability and consistency that generic cloud systems find hard to match.

Performance – React Native provides native-level performance, and well-designed code will result in buttery-smooth user interfaces. Pure native implementations might outperform React Native on occasion, but the use cases are few and far between. Meanwhile, Hybrid tech, such as Ionic and Xamarin, uses web and cannot reproduce a native component's performance. React Native apps compile to native code underneath, so you can easily interact with device facilities like the camera, microphone and accelerometer.

Open-source support –  React Native has an extensive support network. This means documentation is kept relevant and the framework constantly evolves for the better, as we’ve seen with recent additions like Solito. Frameworks like Flutter simply don’t have this level of community support behind them, so you need to resort to custom development more often, resulting in greater costs. 

As Expo continues to grow, React Native’s position will consolidate 

‍

Over the years, one of React Native’s biggest sticking points with developers has been Expo, the toolkit and build system that sits on top of React Native. Expo wasn’t catastrophic; otherwise, apps like Twitter wouldn’t have used it, but it wasn’t ideal either.

For instance, in the past, Expo would only build your app if you were in a 'managed' workflow. If you needed to eject, then you had to build your app yourself, diving into the XCode and Android studio wiring. So, after causing some frustration, Expo picked up a reputation for being too restrictive and not giving the control developers need.

That trend is rapidly reversing. In 2021 Expo released a new product suite called Expo Application Services (EAS). EAS services are now the standard way to build and submit native applications to the stores (Google Play / AppStore). EAS offers enterprise-level CI/CD for React-Native and Expo projects.

Expo is definitely no longer just for prototyping. Now Expo has the stability and automation tools it needs to expand into the enterprise market and remain a long term solution. And the implication is this: you will never need to be in a situation where your developers are building on their CPU.

‍

OTA in the spotlight

‍

With Expo, Over-The-Air (OTA) updates enable you to distribute a new TypeScript bundle via the Internet. 

This is crucial for developing live products, as it reduces the time it takes to launch feature updates and bug fixes to about three minutes. That’s compared to waiting 3-72 hours without OTA.

‍

React Native for web will continue to improve in stability

‍

Your MVP can use React Native for Web to get to market quickly before the iOS and Android versions follow later from the same codebase

‍

As Expo continues to grow, so does support from third-party libraries, especially for React Native for Web. Expo documentation has been listing web alongside iOS and Android for a while now, but what’s new is that third parties are adopting that in droves.

Lack of third-party support has always been a huge issue for React Native for Web. Developers building for iOS and Android could pull in all their favourite buttons and menu components, but when they tried to deploy to the web, the UI would break down. The only solution would be to add in special web versions of those components and do extra work to make it run properly.

Now, those friction points are rapidly being sanded out of the system. What that means for tech teams is that React Native is a viable framework across all platforms. 

This is critical for going to market faster. Your MVP can use React Native for Web to get out the door and pull in users before the iOS and Android versions follow later from the same codebase. 

Your marketing team can use SEO to drive users first to the web build to get initial user traffic and data. Then, at the right time, once you’ve got people happily using your web build, you can nudge them onto the iOS/Android version to drive greater retention. Reddit does this particularly successfully - and aggressively - requiring users to download the app before they can view any comments.

Navigation and rendering on web

‍

Navigation and rendering were two of the primary issues that, until now, prevented React Native from displacing React as the dominant web framework.

However, in 2022, Fernando Rojo released a new external library called Solito, enabling seamless navigation between Next.js and React Native. It’s become essential for everyone, as developers can now make navigation work seamlessly across mobile and web with a single codebase. 

Combined with Vercel’s Next.js framework, it solves a long-standing rendering issue and enables React Native to deliver performance and discoverability at the same time. The server delivers HTML code that search engines can read, and developers can still build with all the dynamism of client-side rendering.

Further development in 2023, allows now Expo to be used with file-based routing, making cross-platform development even more efficient and streamlined for the developer. The file-based router in expo-router provides a cross-platform advantage for developers working with Next.js by allowing them to use similar routing logic across different platforms.

Furthermore, UI kits and libraries like “tamagui” bridge even further the gap between native and web platforms. The “Tamagui” library serves as a powerful tool for writing cross-platform code for both web and React Native applications. It provides a comprehensive set of components that compile seamlessly to both native and web components, ensuring high performance. This capability significantly streamlines the development process, making it an invaluable resource for software developers.

The “write-once, run anywhere” holy grail of productivity is getting closer and closer.

‍

If you’re already using React Native, here’s what you need to know

‍

TypeScript is here to stay

‍

TypeScript catches errors at build time instead of run time, making for more stable apps and faster development

‍

As React Native adoption continues, we’re seeing fewer and fewer codebases still written on JavaScript. What’s taking its place is TypeScript. Although there have been debates for years about which language is better, TypeScript is becoming the standard for anything larger than a two-page app, and it’s clear that it’s here to stay.

A growing number of third-party libraries, core code bases and technologies that support React Native are now TypeScript-first, such as the runtime Deno.

So, if your team isn’t using TypeScript yet, the time to start is now, before you’re forced to adapt and catch up. It’s a learning curve for many developers, but in many cases, it’s easier to use it than not use it since it’s becoming ubiquitous.

Starting with the React-Native release v0.71, Typescript is now the default, which means you get a pre-configured Typescript app with the latest CLI by default.

Taking up TypeScript shouldn’t be a reluctant change. It does force developers to be stricter and adds a level of complexity that not everyone loves. But it also catches errors at build time instead of run time, making for more stable apps and faster development.

For instance, if a developer types in a string of 1 rather than a single 1, TypeScript will catch it and flag it on that developer’s terminal immediately. Whereas with JavaScript, you possibly won’t become aware of the issue until a user triggers it and their app breaks. 

Along with TypeScript, you should also be adopting ESLint and Prettier, which are both linters that force rules inside the code base. If your team is using React Native but isn’t using TypeScript, plus ESLint, plus Prettier, a string of low-hanging fruit awaits you.

‍

 New architecture is here

‍

This is the right way for React Native to go architecturally, so the short-term pain will be worth it in the long run

‍

What’s also driving TypeScript adoption is the new React Native architecture that is almost here, and replaces React Native’s bridge with two new pieces of framework infrastructure. 

One is Turbo Modules, which controls how third-party plugins are injected into React Native’s build system. The other is Fabric, a new piece of render logic responsible for all the visual aspects of the app. Hermes is the new React-Native targeted JS engine developed by Meta, that increases performance and start-up times significantly.

The New Architecture has been officially released since React-Native version 0.68, although not considered stable yet (undergoing changes). But adoption rates continue to grow.

‍Native libraries that aren’t written in a typesafe language will stop working, regardless of whether it’s a basic button or something with more deep linking like navigation or notifications.

With so many legacy libraries that likely won’t be updated, current React Native teams will be forced to make a lot of changes to keep their apps operating smoothly. But this is the right way for React Native to go architecturally, so the short-term pain will be worth it in the long run.

Read: "In Defence of Clean Architecture: A Paradigm for Sustainable Software Development".

‍

Before you commit to React Native…

‍

If your team isn’t already working in React Native, there are some things you’ll need to be mindful of before you make the switch.

‍

You need active data management policies

‍

One of those is how you collect and manage user data. Data collection is going through a disruptive stage as the focus on user privacy grows, and some previously open data avenues to developers are being closed off.

That means tech teams need to start having more in-depth conversations with their product and marketing counterparts about what KPIs can and can’t be measured. 

Attribution libraries like AppsFlyer will become less reliable as iOS and Android privacy tightens, and those kinds of changes will have knock-on effects for marketing and business decisions.

‍

Senior talent demand will continue to outstrip supply

‍

Thanks to the recent big tech hiring pause and redundancies, we’re seeing so many top-tier developers migrating to fintech and large financial organisations because that’s where the budgets are. If you’re a startup or even a mid-tier enterprise, you’re not going to have the resources to compete with them for that senior talent.

That leaves a few options for CTOs who don’t have senior React Native specialists already on their team. 

One option is to invest in education schemes to train your junior developers into senior positions. The other is to bring in an external agency with senior expertise and set up a learning process so your developers can advance their skills alongside the external team.

‍

React Native is the framework of the future and the now

‍

React Native is in the strongest position it’s ever been. It’s become platform agnostic across iOS, Android and Web, and the friction that once prevented seamless cross-platform solutions is being eradicated. 

The framework as a whole is evolving fast due to a very strong community. It’s becoming more stable across the board while supporting development workflows that only seem to get faster and faster. Flutter might be popular in the hobby space, but React Native and Expo are becoming de facto for production-ready apps.

‍

The only barrier to adopting React Native, or making optimum use of it, is a talent shortage

‍

If you’re in need of React Native specialists to come alongside your team, get in touch to learn how we can support you with:

- Full stack technical strategy

- Multi-platform app development

- Post-MVP scaling

‍

"They have strong React skills, they work with Expo, their rates were reasonable, and their flexibility was perfect." - Roger Martin, VP of Avid Gaming