Building of Snack The React Native Playground

Creating a React Native project can involve installing dependencies, compiling, and waiting for it to run on a device, sometimes for up to 15 minutes. Snack aims to make that quicker: users open a link, edit an app in the browser, and preview it on a device. Its editor also offers components that users can drag into their code.

An earlier project, AirPlay, sent a server-built bundle to a remote simulator, which Sahoo found slow. Snack instead sends code from the editor to a React Native app running inside Expo, where it is evaluated after each change. Babel Standalone transpiles modern JavaScript first, and a custom module map supports imports and exports.

Snack wraps component methods in try-catch blocks to display some JavaScript errors without crashing the app, though native-side errors and some module failures remain difficult to catch. For npm libraries, Snackager uses Webpack and code reused from Haul to build packages without duplicating React, React Native, or runtime polyfills. It caches bundles in S3 and pins package versions so a Snack keeps using the same version.

The editor integrates ESLint and Prettier and includes searchable components that can insert required code through AST manipulation. Sahoo describes uses including teaching, prototyping, documentation embeds, and bug reports that others can try from a link. Repl.it used the Snack SDK, while Native Directory linked library examples to Snacks for hands-on previews.

At the time of the talk, the team was working on multi-file support and user accounts for saving projects. Sahoo describes the work as a way to contribute something useful to the community.