A Better Developer Experience with Expo Snack

CLIENT INFO

Snack is one of the many Expo projects aimed at making working with React Native and Expo easier.

Industry

IT & Software

Company type

SME

Region

United States

tech INFO

We made it easier to experiment with React Native code in Snack.

Technologies

React Native | Expo

Platforms

Web-based editor

Tech Stack

Webpack | Ace Editor | custom ESLint

KEY RESULT

Let's connect

Before 14.5s

After 2.5s

35k

lines of code

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.

Let's connect

CHALLENGE

Starting a React Native project involves setting up the developer environment and tools, ensuring stability with dependency management like yarn.lock or package-lock.json to prevent sudden failures.

We aimed to create a zero-setup solution for instant real device preview and easy sharing. We faced several challenges in the process:

Complex Setup: Traditional React Native development requires extensive setup.
Platform Knowledge: Developers need to understand both web and native tools.
Speed and Reliability: Running metro-bundler was slow and unreliable.

SOLUTIONS IMPLEMENTED

MINIMIZED SETUP

Leveraged Expo's development environment to reduce initial setup time.

WEB-BASED EDITOR

Used Ace Editor with custom ESLint for a smooth coding experience.

CUSTOM PACKAGER

Created bundles with Webpack, allowing easy module imports.

INSTANT PREVIEW

Enabled code preview on real devices via the Expo app by patching code changes dynamically.

To avoid running metro-bundler, we opted to patch code changes instead of rebuilding the entire bundle. We chose Ace Editor for the web-based editor, incorporating a custom ESLint build for linting.

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.

USE CASES

BETTER DEVELOPER EXPERIENCE

By enhancing Snack, we aimed to cater to various groups and their use cases:

CODE REFACTORING

Kicked off the project with refactoring the whole socket.MIGRATION Migrated the codebase to TypeScript.

MIGRATION

Migrated the codebase to TypeScript.

DEPENDENCIES

Upgraded major dependencies such as Expo, React Navigation, and React Query.

PAYMENTS

Created two options: In-app purchase with Google Play or App Store and credit card payment.

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.

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.

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

RESULTS

We successfully met our initial goals and continue to enhance the experience with ongoing iterations and feature additions.

Key features include:

A user-friendly web-based editor for rapid deployment without setup
Instant preview on real devices via the Expo app
Effective debugging with console logs
Seamless sharing through easily accessible links
Embeddable editor for documentation

Our commitment to reducing barriers and fostering experimentation with Snack is our contribution to the community, and we look forward to seeing the innovative ideas it sparks.

Your Success Story is Next

Let's connect

CALLSTACK APPROACH

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

DevRel + XD at EigenLayer / EigenDA

at Amazon Web Services

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

Not only does Callstack have tremendously talented engineers, but I know they care about the success of the project as much as I do. Having a true partner is a wonderful experience and gives us the ability to move so much faster than we could without them.

TC Davis

Product Expo

In brief

Snack is the easiest way to experiment and explore working React Native code. It is the first stop for anyone curious what RN is all about, and a constant companion for experienced developers to experiment, collaborate and learn.
‍

Table of contents:

Heading 2

The easiest way to experiment and explore working with React Native code

With Snack, it’s possible to prototype a React Native app on its web based editor and instantly preview it on the device with the Expo app or the web based simulator.
Snack is one of the many projects from Expo, aimed to make working with React Native and Expo easier.

‍

This poses a great barrier to people who want to try out React Native.

With Snack, we wanted to make this easier by addressing following groups of people and their use cases:

Starting a React Native project is a lot of work, including setting up the developer environment and various tools. In addition, projects which were working few days earlier could stop working without any changes if not using something like a yarn.lock or package-lock.json.

Students with limited to no background knowledge with programming and/or ReactNative,
Web developers unfamiliar with device APIs and building native apps,
Native developers unfamiliar with Web app development frameworks and willing to experiment if it’s possible to provide good user experience with React Native,
ReactNative developers wanting to prototype and share an idea,
Library maintainers wanting to provide examples and documentations,
Users trying to provide a repro case when reporting a bug
Speakers and workshop presenters wanting to do a live coding session

We needed to build something that requires no setup, can be previewed instantly on real devices and easily shared with others. We faced several challenges:

React Native spans multiple languages; to be able to setup the developer environment, the developer doesn’t only have to be familiar with Web app development tools, but also native development tools such as Android Studio and XCode
Running React Native’s packager, i.e. metro-bundler was a solution, but it was really slow and unreliable
Being able to try the code out on a web based simulator was a nice convenience (as on rnplay.org), but we needed to be able to test on a real device to be actually able to try the real thing
Ability to install modules from NPM was necessary for a lot of scenarios

We also needed to build a web based editor which provides a good editing experience with linting, managing multiple files with drag and drop, logging etc.

Minimize the setup

The first problem we needed to solve was to minimize the setup required. Fortunately, the expo development environment already takes care of this. While using Expo would solve this issue, it still took a little bit of work. Another approach was to run a React Native development environment on the cloud (rnplay.org) RNPlay. However it was really slow and unusable. To avoid running metro-bundler, we decided to patch in the code that has changed instead of rebuilding the full bundle every time. For the web based editor, we decided to use Ace Editor with a custom ESLint build for linting the files.

Web based editor with a companion app

Our final approach involved a web based editor with a companion app running inside the Expo app on the device which patches in the changed code. The Expo app can load the experience by opening a link to the snack or by scanning a QR code.

The basic approach is that the web UI sends the code and the list of dependencies to the app, the app downloads the dependencies, transforms the code with Babel, and then executes it. Source

We used Ace Editor for the code editor with various enhancements to improve the editing experience, such as ESLint and Prettier integration, various keyboard shortcut, file management support etc.: source

We also built a custom packager which creates bundles to be used by projects on Snack, so you could import a module like usual and we take care of the rest behind the scenes. The packager is based on webpack with custom loaders and plugins: sourcePreview results instantly on a real device using the Expo app

Preview results instantly on a real device using the Expo app‍

We managed to achieve the goals we originally set and constantly iterating on improving the experience and adding new features.

Easy to use web based editor which lets the developer start quickly without setting up a developer environment,
Preview results instantly on real device using the expo app
Debugging capabilities with console logs
Easily shareable links
Embeddable editor for documentation

We’re happy to be able to help the community by lowering the barriers to entry and experimentation with Snack and excited to see what new ideas the community comes up with. If you are using React Native and haven’t checked it out yet, you definitely should!