Apple Vision

React Native Meets Apple Vision

Callstack engineer, Oskar Kwaśniewski, spearheaded the integration of React Native with visionOS, transforming cross-platform development. Find out more about the journey.

Services:

Integration Support for Wearables, TV, Consoles

Product Development and Growth

Tech Stack Upgrade

CLIENT INFO

Apple Vision OS it’s a specialized operating system designed specifically for augmented reality (AR) experiences on Apple devices.

Industry

AR software

Company type

Providing innovative digital interactions for Apple users

Region

USA

tech INFO

Oskar Kwaśniewski teamed with Matt Hargett to make React Native app development for visionOS possible.

Technologies

React Native

Platforms

iOS | Wearables

Tech Stack

JavaScript | React | Swift | Objective-C

Before 14.5s

After 2.5s

88%

decreased shimmer render time

50%

quicker load times for chats on subsequent visits

50%

faster rendering time for chats

18%

less frame junk when scrolling

before

The refresh time was 5-11 seconds

after

The refresh time was reduced to ~2 s

CHALLENGE

Under the guidance of Michał Pierzchała, Head of Technology here at Callstack, Oskar Kwaśniewski embarked on a dedicated mission to bridge the gap between React Native and visionOS.

This endeavor was driven by our commitment to advancing technology and empowering developers worldwide.

THE JOURNEY

Pioneering React Native for visionOS: A Journey in XR Development and Collaboration

As part of our R&D initiatives, Oskar was able to dedicate himself full-time to developing React Native visionOS - a library enabling seamless development for visionOS with full support for the platform's SDK. He teamed up with Matt Hargett from Rebecker Specialties, helping with their first spatial React Native app, Factotum. It’s an XR-first app providing a 3D sandbox for users to monitor the health of their GitHub portfolio. The journey was discussed in a podcast on bringing React Native to Virtual Reality. In this episode, Oskar and Michał shared the challenges and successes of this ambitious project.

Today is the day! Apple Vision Pro is out and React Native is ready! 🥽

We just released React Native visionOS 0.73 🚀

I wrote a blog post on how you can get started ⬇️ pic.twitter.com/wELr2uqtUe
— Oskar Kwaśniewski (@o_kwasniewski) February 2, 2024

define

Identified confirmed/reported issues such as re-renders and created a backlog for potential improvements.

measure

Used Macro tool measurements.

ANALYZE

Selected the most promising performance changes.

IMPROVE

Implemented changes following React Native best practices.

CONTROL

Re-measured with the Marco tool and compared to the 4.58.0 native version.

Deployment

Developed the release process for both Android and iOS.

API DESIGN

Proposed an API based on the Rive Android library features.

INTEGRATION

Implemented Rive SDK integration for Android and created an example app for testing.

iOS SUPPORT

Extended the integration to iOS after successful Android testing.

AUTOMATION

Created a Github Action workflow for automated library releases.

PUBLIC RELEASE

Made the library publicly available on platforms like CocoaPods and Maven.

DEPENDENCIES

Managing dependencies, including Expo and react-native packages for each new release.

RELEASES

Automating the release process with custom GitHub Actions.

TRAINING

Providing React Native training through pair programming, code reviews, and workshops.

RN PAPER

Forked the React Native Paper library.

Established continuous integration for automated code updates.

testing

Set up a Storybook for component testing.

design

Developed the basis of the design – color, layout, and typography.

Once we had the basics down, we started working on the UI library components. The components we developed included: AppBar, TextField. Button, Icon Button, Toast, which included animation and swipe-to-dismiss, Match Status, Search, and many more!

Apart from all the fixes and improvements, we provided metrics that should be tracked over time so the client knows exactly what to monitor and correct to maintain great performance levels long term.

16.8s

App start time, before 48.5s

8.6s

Report screen load time, before 15.9s

2.5s

Sending a message, before 14.5s

60FPS

Average FPS on LHN

2.6s

Search screen load time, before 11.8s

Together

we acted as staff augmentation within Advantys’ team.

Engaged

in collaborative problem-solving and solution exploration.

supervised

by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.

migrating

from a custom server-side rendering (SSR) solution to Next.js

Focusing

on Core Web Vitals metrics

Optimizing

a large shared JS bundle

Introducing

Fast Refresh for accelerated development iterations

The introduction of Fast Refresh in Next.js further accelerated development iterations. All in all, it contributed to an enhanced user and developer experience.In a span of several months, our team effectively overhauled the AutoZone app's performance, which initially struggled on both desktop and mobile devices. To find out more about the whole AutoZone project, head over to the case study on main case study title.

strong

architecture with professional maintenance and continuous updates

high

code coverage with quality-compliant unit and integration tests

Comprehensive

testing, including end-to-end.

Faster

time-to-market with mobile process automation.

New PoC

features like biometrics and mobile health kit integration.

Last but not least, our collaboration significantly enhanced the knowledge of Thriva's development team regarding React and React Native.

Enhanced app performance by over 200%.
Improved Core Web Vitals metrics to meet Google's standards.
Reduced refresh time to ~2s with Fast Refresh feature.
Improve code quality and ongoing efforts to add advanced functionalities

COMMUNITY RECEPTION

React Native visionOS Release: Igniting Excitement and New Possibilities in the Developer Community

The release of React Native visionOS sparked widespread enthusiasm within the React Native community. Developers and influencers alike eagerly anticipated the possibilities unlocked by this integration, marking a new era in mobile app development.

Made with React Native 🥽 https://t.co/J8oYaRFKQJ
— Michał Pierzchała (@thymikee) April 22, 2024

CALLSTACK APPROACH

"As a technology leader, it's critical that the open-source infrastructure that we build our businesses on is durably vibrant. The team at Callstack is so consistent in their execution, across several dozen different engineers, in a way that is exceedingly rare. I feel like they are my secret weapon in achieving what most other people would deem impossible."

Matt Hargett - Founder of Rebecker Specialties

Case studies

“Callstack played an essential role in helping us release our mobile app to the market. They helped us set up and optimise our mobile ecosystem.”

Donovan Isherwood - Engineering Manager

Thriva

get in touch

Trusted by

“The team at Callstack are the most experienced and trusted engineers in the React Native community and ecosystem.”

Nader Dabit

Senior Developer Advocate

at Amazon Web Services

Get in touch

This information will be used only to contact you. For details, check our Privacy Policy.

Home

Case Studies

Apple Vision

React Native Meets Apple Vision

Let’s talk about your project

Let's connect

Matt Hargett

Founder of Rebecker Specialties

In brief

Callstack engineer, Oskar Kwaśniewski, spearheaded the integration of React Native with visionOS, transforming cross-platform development. Find out more about the journey.

Table of contents:

Heading 2

React Native for Apple visionOS

Today is the day! Apple Vision Pro is out and React Native is ready! 🥽

We just released React Native visionOS 0.73 🚀

I wrote a blog post on how you can get started ⬇️ pic.twitter.com/wELr2uqtUe
— Oskar Kwaśniewski (@o_kwasniewski) February 2, 2024

Background

Under the guidance of Michał Pierzchała, Head of Technology here at Callstack, Oskar Kwaśniewski embarked on a dedicated mission to bridge the gap between React Native and visionOS.

This endeavor was driven by our commitment to advancing technology and empowering developers worldwide.

The journey

He teamed up with Matt Hargett from Rebecker Specialties, helping with their first spatial React Native app, Factotum. It’s an XR-first app providing a 3D sandbox for users to monitor the health of their GitHub portfolio.

"Beyond the first week of project kickoff and pair programming, Callstack self-directed and executed very independently, with low overhead, balancing both my product needs and the needs of the global developer ecosystem."
Matt Hargett

The journey was discussed in a podcast on bringing React Native to Virtual Reality. In this episode, Oskar and Michał shared the challenges and successes of this ambitious project.

Community reception

Industry recognition

Oskar's groundbreaking work caught the attention of industry leaders, leading to an invitation to present at Render ATL, a prestigious software engineering conference. This platform provided Oskar with an opportunity to showcase the capabilities of React Native on visionOS and further drive adoption among developers and businesses.

Made with React Native 🥽 https://t.co/J8oYaRFKQJ
— Michał Pierzchała (@thymikee) April 22, 2024

Final notes

The successful integration of React Native with visionOS is a milestone for Callstack and the broader developer community. By leveraging our expertise and commitment to innovation, we continue to push the boundaries of mobile app development, empowering developers to realize their visions on any platform.