What’s next for React Native in 2024

React Native continues to evolve and make strides in 2024. As competition increases from other cross-platform tools like Flutter, Jetpack Compose, and .NET MAUI, there is pressure to improve the React Native developer and user experience. At the same time, economic factors are driving more companies to adopt cost-saving multi-platform solutions that allow them to combine iOS, Android, and sometimes even web teams into unified teams capable of solving end-to-end business objectives.

As Perth app developers with years of experience in developing React Native apps, we’ve summarised all recent developments within React Native below.

React Native New Architecture Adoption

According to the latest State of React Native survey, 23% of React Native developers are now using the new architecture in their projects. The new architecture introduces two key components - the Fabric renderer and the TurboModule system, replacing the old JS bridge.

Old Architecture:

Image taken from React Native New Architecture - What to Expect? | LITSLINK Blog

New Architecture:

Image taken from React Native New Architecture - What to Expect? | LITSLINK Blog

The primary focus of the new architecture is making UI updates and interaction with the native thread synchronous, allowing the calling of native functions directly from JS. This can lead to improved performance, more predictable UI updates for things like animations, as well as allow the use of platform-specific JS engines to achieve optimal performance.

Challenges facing wider adoption include the migration effort required to update both JavaScript and native code, maturing documentation and tooling, and overall ecosystem readiness as third-party libraries adapt. For example, Firebase libraries used by almost ⅓ of all developers are yet to support new architecture and unlikely to support it in the near future. We can expect the majority of developers to continue using react native bridge and JSC engine in 2024.

The Dominance of Skia and Reanimated

86% of React Native developers now use the Skia and Reanimated animation libraries, making them de-facto standards for complex animations and interactions.

React Native Skia is a framework that allows you to create high-performance graphics and animations with React Native. One of the key features of React Native Skia is its integration with Reanimated, a library that enables declarative and reactive animations in React Native.

Reanimated is a library that provides a powerful API for creating animations in React Native. Reanimated allows you to define animations using shared and derived values, which are reactive and can be updated dynamically. Reanimated also supports running animations on the UI thread or the JS thread, depending on your needs and preferences.

Skia is a graphics engine that powers many popular applications, such as Chrome, Android, and Flutter. Skia offers a rich set of primitives and features for drawing and manipulating graphics, such as paths, shaders, filters, blend modes, and more. Skia also supports hardware acceleration, which means it can leverage the GPU to render graphics faster and smoother.

These tools offer better performance, more advanced animation capabilities like SVG paths and animated images, and an easier development experience compared to built-in animation APIs.

As Skia and Reanimated integrate further with tools like NativeWind 4, their dominance is expected to continue through 2024. The biggest upcoming improvement is simplifying and standardising animation API to make it more declarative and compatible with the web:

Current API: 

import { View, StyleSheet, Pressable } from 'react-native';
import Animated, {
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const styles = StyleSheet.create({
  root: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 160,
    height: 160,
    backgroundColor: 'rgb(22 163 74)',
  },
});

export default function Box() {
  const animation = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: interpolate(animation.value, [0, 1], [1, 0.75]) }],
    borderRadius: interpolate(animation.value, [0, 1], [2, 16]),
  }));

  return (
    <View style={styles.root}>
      <AnimatedPressable
        style={[styles.box, animatedStyle]}
        onPressIn={() => (animation.value = withTiming(1, { duration: 200 }))}
        onPressOut={() => (animation.value = withTiming(0, { duration: 200 }))}
      />
    </View>
  );
}

Snippet taken from Alex on X: https://t.co/aIW5jDQwiy" / X (twitter.com)

New declarative API with Tailwind:

import { View } from 'react-native';

export default function Main() {
  return (
    <View className='flex-1 items-center justify-center'>
      <View className='bg-green-600 h-40 w-40 transition ease-in-out duration-200 scale-100 rounded-sm active:scale-75 active:rounded-2xl' />
    </View>
  );
}

Snippet taken from Alex on X: https://t.co/aIW5jDQwiy" / X (twitter.com)

The Rise of the Expo Ecosystem

Over 70% of React Native developers now use the Expo ecosystem of tools and services. Expo is React Native framework and supporting services that simplify the development workflow, bridges skill gaps, and exposes a comprehensive set of JavaScript APIs.

A key benefit of Expo is handling the complexity of upgrading React Native projects by managing the native code dependencies, resolving conflicts, and ensuring compatibility across versions and platforms.  

Expo allows developers to build high-quality cross-platform apps using familiar web patterns without sacrificing native performance or customization. With a faster, easier, and more productive experience, Expo is rapidly becoming the de-facto standard for React Native development. We expect that using bare React Native won't be a common thing anymore in the near future.

2024 and beyond

What further changes can we expect in the React Native development ecosystem in 2024 and beyond? 

React 19

React 19 is the first major react release since 2022. The biggest change in this release is an introduction of a compiler that automatically optimises React code for performance, reducing unnecessary re-rendering and improving user experience.

It works by rewriting code based on its understanding of JavaScript and React’s rules, without changing the core mental model of React. The React Compiler is especially useful for complex data visualisation components that frequently re-render, as it can significantly boost rendering speed and smoothness.

This way developers will be able to focus on core business logic of their apps worrying less about traditional optimisation tools such as useMemo and useCallback.

Additionally, React 19 will also enhance the strict mode checks, which will help you catch potential bugs and errors in your code.

Andrew Clark - @reactjs core team

These changes will make React significantly easier to get started with and will help to avoid common performance pitfalls.

React Strict DOM

In the past, the extent to which you could share code between a web app and a React Native app was limited to data models, core business logic, and state management. However, sharing UI and styling was problematic due to significant differences between how React Native and React on the web handle manipulating underlying view hierarchies/DOM.

While React.js uses standard HTML DOM elements and corresponding APIs, React Native utilises a completely different set of components that abstract underlying platform-specific views. React Native also handles styling completely differently, having no access to the full feature set of modern CSS and having more mobile-friendly defaults for layout APIs (such as flex being in column by default rather than row).

Sharing UI between native and web may not seem as desirable in the case of sharing components with desktop web apps. However, mobile-first designs and PWAs share many common UI elements with iOS and Android apps. Furthermore, the growing maturity of React Native for Windows and macOS positions it as a viable alternative to using Electron, so once again, there is an increasing desire to be able to run the same UI code and supporting business logic in the browser and natively.

Recognizing both the need and potential, Meta has started exploring how this can be achieved and open-sourced an early version of a unified DOM abstraction that can bridge the gap between React Native and React.js. The React Strict DOM allows using standard HTML tags in a React Native app as well as sharing styling between web and native using the Stylex styling library.

This allows creating component libraries that can be freely shared between native and web, significantly simplifying cross-platform development. This is potentially the biggest disruption to how React Native apps are built since the introduction of hooks in React.

React Native with DOM-style components:

import { html, css } from 'react-native/dom';

export function VStackPanel(props) {
  const connectedCallback = function (node) {
    const handler = (e) => {
      const { offsetWidth } = e.target;
      // Additional logic here
    };

    const options = { capture: true };
    node.addEventListener('pointerdown', handler, options);
    
    return function disconnected() {
      node.removeEventListener('pointerdown', handler, options);
    };
  };

  return (
    // Using an HTML element
    <html.div
      children={props.children}
      // Synchronous click event that matches W3C event type
      on-click={props.click}
      // Using HTMLElement instance API
      ref={connectedCallback}
      // Using optimized styles
      style={css(
        { flexDirection: 'column', flex: 1 },
        props.style
      )}
    />
  );
}

StyleX cross-platform styling:

import * as React from 'react';
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({ /* styles here */ });
const colorStyles = stylex.create({ /* color variants here */ });

function ReactDiv({ color, isActive, style }) {
  return (
    <div {...stylex.props(
      styles.main,
      // apply styles conditionally
      isActive && styles.active,
      // choose a style variant based on a prop
      colorStyles[color],
      // styles passed as props
      style,
    )} />
  );
}

To close the gap between the platforms, React Native will significantly rework the built-in APIs to make them more consistent with the web and polyfill a large number of standard APIs that are missing or inconsistent across platforms, such as DOM traversal, layout, and accessibility.

Meta already uses this internally for sharing code between Instagram on mobile and the web, while Microsoft has allocated significant resources to support this effort. This is an ambitious yet risky bet that can transform React Native as we know it, completely merging it with the core React in the future.

If successful, this will further blur the line between native and web development, allowing teams to be more productive than ever.

If released too early or too aggressively, this can lead to React Native having unstable APIs and major breaking changes in the next few years.

Consistent Event Loop Processing Model

To fulfil the objective of freely sharing UI between web and native, the underlying event loop has to be made consistent between platforms. This requires changing the order of execution of effects and mounting in React Native to support microtasks and synchronous events, and to remove the background executor option in Fabric to increase the alignment with Web specifications.

This issue is becoming especially important to make React Native compatible with the optimisations offered by the new compiler. For example, at the moment, useLayoutEffect is not guaranteed to run before repainting the screen, making it impossible to have deterministic behaviour that would be required by a compiler. Removing async rendering seems like an ambitious yet risky attempt that can potentially sacrifice performance in favour of deterministic rendering behaviour.

Unlike the strict-DOM, this change is in an early stage and may not make it into production if the performance bottlenecks prove too difficult to solve. If successful, though, this will make React Native apps practically act like yet another browser rather than a distinct platform, making it easier for web devs to contribute to native projects.

Current implementation

Proposed change

Static Hermes

React Native has historically relied on a Just-in-Time (JIT) JavaScript runtime to execute on an underlying platform. JIT compilation is a technique used in computing where code is not compiled entirely before a program runs. Instead, it is compiled during the program's execution, usually translating an intermediate representation like bytecode into the native machine code of the device it's running on. This approach provides several benefits, allowing for the replacement and modification of the executed bundle on-the-fly, enabling hot reloading and code push capabilities.

As the ambitions for where and how React Native can be used continue to grow, there is a need to push performance even further, achieving near-native execution speeds. This is where Static Hermes comes into play. Static Hermes is an exciting evolution of the Hermes JavaScript engine, which has been a driving force behind React Native.

At its core, Static Hermes changes the game by compiling your JavaScript code into native machine code ahead of time, during the build process, rather than during the app's runtime. To accomplish this effectively, Static Hermes relies heavily on type systems like TypeScript or Flow. This shift promises substantial benefits for React Native developers, including significantly faster startup times, smaller app sizes, and improved memory efficiency. Since Static Hermes can analyse your code's structure through types, it can also lead to potential runtime performance gains in certain scenarios.

Image taken from thejustinwalsh.eth on X

https://github.com/facebook/hermes/tree/static_h

It's important to note that using Static Hermes requires adopting either TypeScript or Flow, and the feature is still considered experimental. However, if you prioritise a lightning-fast user experience with minimal app size, and you're already using type systems or open to adopting them, Static Hermes holds great promise for your React Native development.

Conclusion

The future of React Native in 2024 and beyond looks very promising, even as it faces stiff competition from other cross-platform development tools like Flutter, Jetpack Compose, and .NET MAUI. With continual improvements to its core architecture, animation capabilities, developer tooling, and ability to share code between web and native platforms, React Native is rapidly evolving to meet the demands of an increasingly competitive landscape.

Groundbreaking innovations like the new architecture, React Compiler optimisations, unified DOM abstraction bridging web and native, and the high-performance Static Hermes engine will push the boundaries of what's possible - enabling unparalleled developer productivity, unprecedented code reuse across platforms, and best-in-class user experiences. 

While the path forward is not without risks and significant challenges to overcome, React Native's commitment to drastically expanding its capabilities demonstrates its determination to remain a powerful and efficient solution for building world-class cross-platform apps. As the React Native ecosystem continues to mature and widen its lead, it is solidifying its position as the preeminent framework for creating truly seamless and high-quality mobile experiences that can keep up with and surpass competitors.

With strong adoption rates and this ambitious technology roadmap, React Native is positioning itself for continued dominance in 2024 and beyond.

Here's a little-known secret: The PS5's awesome interface is built with React Native.

Image taken from: PS5 user interface revealed - Polygon

Sources: 

https://results.stateofreactnative.com/ 
https://twitter.com/AlexAlexandrius/status/1759133968702521833/video/3 
https://reactnative.dev/architecture/overview
https://github.com/facebook/react-strict-dom 
https://twitter.com/Kelset/status/1760367655423549480 
https://twitter.com/RubenNorte/status/1734289750360465499
https://medium.com/@elves.silva.vieira/javascript-achieves-breakthrough-performance-with-static-hermes-6286b0ac8ef7 
https://x.com/syke/status/1619413099861413889?s=20