Now is The Best Time to Learn React Native

Your favorite framework that’ll never reach version 1 just announced their biggest release yet, and this version concludes a 6 year effort to fully redefine its architecture. React Native is one of the most popular ways to build native apps in JavaScript and, thanks to its recent rework, it gained the performance boost needed to make it the perfect option for developers who want to jump head first into building for native devices with little to no fuss.

Understanding React Native

In short, React Native is a framework that lets you build fully native apps using JavaScript and React. It works by combining React’s declarative UI with a system of native modules and components, which bridge JavaScript and the native platform. This allows your JavaScript code to control native elements and create a seamless user experience that feels like a native app.

The Need for Cross-Platform Development

But why do you need React Native, when native platforms offer their own development solutions? Well, it all boils down to cross-platform efficiency versus native specificity. With native development, you’d build separate codebases, which means duplicate effort to achieve similar functionality across platforms. This approach can be time-intensive and costly, and, frankly, in this day and age nobody has time for that. React Native addresses this by allowing a single JavaScript codebase to render native UI elements on native platforms. It achieves this by translating React components to their native equivalents, offering the look and feel of a native app without requiring platform-specific code. On top of that, most of the knowledge you might have from building web apps with React or similar frameworks can be transferred to building native apps.

Historical Architecture

It is important to know that prior to this release, React Native used to rely heavily on an asynchronous bridge to communicate between JavaScript and native threads. In order to render a component or call a native function the JavaScript code would send serialized messages across this bridge, which the native side would pick up, process, and respond to. This approach allowed cross-platform compatibility but introduced some performance limitations, like delays in updating the UI or processing frequent interactions. Additionally, in the old architecture, serializing function calls over the bridge quickly became a bottleneck, especially for frequent updates or large objects. This made it hard for apps to achieve 60 frames per second reliably.

The New Architecture

Now, with the New Architecture, React Native moves beyond this bridge, offering a direct, synchronous link between JavaScript and native code. This is powered by the new JavaScript Interface and a C++ core, which provide faster communication and more efficient handling of complex animations, transitions, and real-time user inputs. The New Architecture includes four main parts:

  1. Module System: First the new Module system gives the React Native Renderer direct, synchronous access to the native layer, enabling it to handle events, schedule updates, and read layout both synchronously and asynchronously. Additionally, Native Modules now load lazily by default, boosting app performance by only loading modules when needed.
  2. New Renderer: The New Renderer can manage multiple update trees across threads, allowing React to handle concurrent updates on the main or background threads. It supports synchronous and asynchronous layout reading, enabling smoother, more responsive UIs without jank.
  3. Event Loop: The new Event Loop processes tasks on the JavaScript thread in a defined order, allowing React to prioritize urgent user events over lower-priority transitions. It also aligns with web standards, enabling support for features like microtasks, Mutation and Intersection Observer.
  4. Direct Communication: Finally, removing the bridge enables faster startup and direct JavaScript-to-native communication, reducing task-switching overhead and improving error reporting and debugging.

Core Concepts

There are 5 React Native concepts you need to know in order to be efficient with this tool immediately:

  1. Component-Based Architecture: Apps are built using a very common component-based architecture, so everything on the screen ranging from buttons to whole screens, is a component.
  2. Props and State Management: Props are immutable values passed from a parent component to a child, while state is mutable and manages a component’s internal data. This data is reactive, so when something changes it, the UI will be updated accordingly.
  3. Flexbox Layout: React Native uses Flexbox for layout, allowing you to create responsive designs without the need for platform-specific adjustments.
  4. Navigation: React Navigation is a standalone library which lets you handle navigation stacks, tabs, and drawer navigations to create seamless transitions between app screens.
  5. Native Modules: Native applications may need to access device capabilities like the camera or GPS. Native modules allow apps to leverage platform-specific APIs, and via the new direct JSI communication modules have reduced latency and improved performance.

Practical Implementation

The best way to experience React Native is through a Framework. With Expo, you can create an app and define a navigation stack for Home, Camera, and Data screens. The home screen acts as the hub, with buttons to navigate to the other screens. The only difference from web development is using UI components from the react-native package instead of plain old HTML objects. In the Camera Screen component, you’ll need to handle permissions and device access. Mobile development permissions are critical, as they ensure that your app respects user privacy and only accesses resources it has explicit permission for. From scanning QR codes to recording videos, Expo’s Camera API gives you robust tools for building a wide range of apps. For data handling, you can use familiar React patterns. In the Data Screen, useEffect can be used to retrieve data from the server and assign it to the internal state. While data is loading, an Activity Indicator component can be displayed, and once the data is available, items can be shown in a scrollable list.

React Native offers a very familiar dev experience while allowing you to build state of the art native apps. There are numerous success stories of large companies using it in production, and this new architecture makes React Native more appealing than ever.

If you want to explore other ways to build apps you can check some of the other videos on my channel.

Until next time, thank you for reading!