THE BIGGEST THINGS IN TECH: REACT NATIVE ROUNDUP

React Native, one of the most popular frameworks for building cross-platform mobile applications, continues to evolve and impress developers with its capabilities.

This past month at the third edition of the App.js Conference, the only React Native & Expo conference, many new features and improvements were announced, including upgrades to libraries used for 2D graphics, 3D rendering, and app navigation.

Reanimated Integrates Expo GL for Impressive Visual Effects

Reanimated is a replacement for React Native’s native animation capabilities.

It’s opened the door to complex real-time animations by tying into Expo GL, a wrapper for OpenGL ES which is a common architecture for running shaders (programs that run directly on the GPU).

Image credits: Software Mansion

Now, Reanimated allows developers to update the GL context directly from the UI thread without any delays.

By creating shared values and using Reanimated’s gesture handler, developers can achieve smooth and responsive custom animations on the GPU, even when the JavaScript thread is busy.

Another benefit of tying into OpenGL ES is that Reanimated can now act as a bridge to a variety of other OpenGL frameworks.

For example, Three.js, a powerful OpenGL-based 3D library, was brought to React Native to enable developers to load 3D models and manipulate them easily.

By supporting more and more frameworks originally designed for the web, there’s no doubt that many web devs who were hesitant to pick up React Native may find it more approachable now that their favorite frameworks are being incorporated.

Rich & Reactive Animations with React Native Skia

React Native Skia is an effort to bring rich 2D primitives to React Native directly in the JSX, allowing developers to create engaging and dynamic user interfaces without having to switch to another language to write the animations. 

Image credits: GitHub

React Native Skia ties directly into Skia, a rendering layer that is already used natively by Android and iOS.

It makes an effort to act like other React Native frameworks so it can be tested by traditional automated UI testing frameworks, and the render tree can even be serialized and sent to iOS and Android devices for further testing.

This allows developers to check for correctness and ensure the desired results.

One significant improvement in React Native Skia is the migration of the JavaScript renderer to a C++ renderer called Skia DOM. This migration brings two major benefits: 

1. The C++ renderer enables faster rendering times, especially for the initial frame (an advantage that even GPU frameworks don’t have).
2.  It provides a significant performance boost, ranging from 10 to 100 times, depending on the complexity of the drawing.

Newly announced at the conference is the introduction of “Native View Snapshots” in React Native.

This feature enables the blending of native views with React Native Skia views, making it possible to achieve effects like backdrop filters and page turning transitions.

These new capabilities offer greater flexibility in creating visually appealing and immersive user interfaces.

A sneak-peek of the new Rich Text API was also shown. This API supports text layouts, internationalization, and system fonts, providing developers with more control and flexibility when working with text in their applications.

React Native Development Gets a Boost with Expo Router V2

Native apps dominate the mobile landscape, accounting for over 90% of time spent on devices, while the remaining 10% is spent on mobile web.

However, many businesses require a website that relies on SEO and shareable URLs to advertise their products and services, which apps traditionally can’t provide.

As a result, a trend has emerged where mobile websites have become closely intertwined with their native app counterparts.

These websites, referred to as Mobile Gateway sites, leverage these features normally associated with the web directly into mobile applications, blurring the lines between app and mobile site.

Expo Router makes creating this style of app a breeze, allowing for the following features:

• Instant Availability allows users to preview app content on any web page at any time. This is particularly useful for users who haven’t installed the app yet, as they can still access and explore its content.
• Universal Links seamlessly connects a website and a native app. Universal apps, as Expo calls them, enable users to skip the mobile website and open the connected website link directly in the application. This allows users to access app content through a standard URL, making it shareable on various platforms such as social media, emails, and even TV commercials.
• Installation Convenience enables users to install an app directly from the browser without visiting the app store. Moreover, when users open the app from the browser page, they can be directed to the same page within the app without losing any progress. 
• Universal SEO makes the content inside a native app discoverable through search engines, surpassing the limitations of being buried within app stores.

While these features hold tremendous value, implementing universal links has historically been challenging, especially in terms of scalability and testing.

Image credits: GitHub

Most companies only implement universal links for a few key routes, often ignoring vital data like query parameters, resulting in a less than satisfactory user experience. However, Expo aims to simplify this process and unlock the true potential of universal apps with the newly announced Expo Router V2.

It introduces static routes, enabling developers to export routes as crawlable HTML for search engine indexing. This feature allows search engines to recommend app content and link directly into the app.

Additionally, Expo Router V2 offers enhanced TypeScript support, with Expo CLI automatically installing TypeScript dependencies and setting up the necessary configurations.

One of the most significant additions in Expo Router V2 is the state-of-the-art deep linking engine. Rather than relying on arbitrary IDs, Expo Router introduces links and URL-based navigation.

Each route becomes publicly accessible through deep links, which also support query parameters for passing data. This deep linking engine seamlessly integrates with universal links, making it simple to set up and unlocking the potential for installing apps directly from the browser.

To further enhance app discoverability and improve search engine indexing, Expo introduces Expo Head, a module that generates metadata per route for both web and native platforms. This metadata, combined with universal links, enables advanced features like Siri integration and Apple Handoff.

Users can interact with app content through Siri commands and seamlessly transition between mobile, web, and other devices while preserving state.

React Native continues to solidify its position as one of the leading frameworks for cross-platform mobile application development. The recent announcements at the App.js Conference have introduced exciting new features and enhancements that further enhance the capabilities of React Native.

Look out for our next edition of the Tech Top 3 to stay-up-to-date on all of the latest and greatest topics in tech!