.webp)
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
35k
lines of code
7
months of work
800
code commits
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
Instant Preview
Developers can instantly preview code changes on real devices without a complex setup.
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.
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.
Loosely Coupled Mini-Apps
Ensuring independence between mini-apps while maintaining necessary communication was a priority. The team addressed this by:
- Isolating client states and minimizing shared states.
- Allowing server state sharing through a centralized query client.
Navigation Complexity
Balancing centralized and decentralized navigation posed challenges. A centralized approach was chosen to simplify integration during initial development, with flexibility for future changes.
Dependency Maintenance
Managing native and JavaScript dependencies required meticulous configuration, streamlined by tools like rnx-align-deps and Re.Pack’s shared fields.
01
CODE REFACTORING
Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.
02
MIGRATION
Migrated the codebase to TypeScript.
03
DEPENDENCIES
Upgraded major dependencies such as Expo, React Navigation, and React Query.
04
PAYMENTS
Created two options: In-app purchase with Google Play or App Store and credit card payment.
05
linking
Sorted out links, integrated content, and implemented html rendering.
We provided full front-end support, project configuration, feature parity, and expert advice on technical and user experience. We also implemented a new design guideline, including dark mode with auto theme detection.
01
RN PAPER
Forked the React Native Paper library.
02
ci
Established continuous integration for automated code updates.
03
testing
Set up a Storybook for component testing.
04
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
01
Together
we acted as staff augmentation within Advantys’ team.
02
Engaged
in collaborative problem-solving and solution exploration.
03
supervised
by Advantys' CTO, the project utilized GitHub, Notion, and Slack for communication.
01
migrating
from a custom server-side rendering (SSR) solution to Next.js
02
Focusing
on Core Web Vitals metrics
03
Optimizing
a large shared JS bundle
04
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.
01
strong
architecture with professional maintenance and continuous updates
02
high
code coverage with quality-compliant unit and integration tests
03
Comprehensive
testing, including end-to-end.
04
Faster
time-to-market with mobile process automation.
05
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.
- Students new to programming and React Native
- Web developers unfamiliar with device APIs and native apps
- Native developers exploring web app frameworks and React Native's UX potential
- React Native developers prototyping and sharing ideas
- Library maintainers creating examples and documentation
- Users providing reproducible cases for bug reports
- Speakers and workshop presenters conducting live coding sessions
"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
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.
Your Success Story is Next
CALLSTACK APPROACH
Case studies
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
DevRel + XD at EigenLayer / EigenDA
at Amazon Web Services
This information will be used only to contact you. For details, check our Privacy Policy.
.webp)
