Expo Snack

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

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

Expo

Introduction

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

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.

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.

Problem

Tiresome setup of a React Native Project

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

Your browser does not support the video tag.

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.

Approach

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.

Your browser does not support the video tag.

Solution

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.

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:

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!

Let's work together

Need help with React or React Native? Let us know!

I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.

Subscribe to our newsletter

You may unsubscribe from these communications at any time.For details see the Privacy Policy.

Services

Contact

Callstack.io Sp. z o.o. seated in Wrocław, Poland, at Rybacka 7, 53-656 Wrocław, entered in the Register of Entrepreneurs of the National Court Register, kept by the District Court of Wrocław-Fabryczna in Wrocław, VI Commercial Division of the National Court Register under the number 0000606530, with share capital of PLN 8,000.00, with tax identification number (NIP) 8992785616, and statistical number (REGON) 363921820.