Snack — A Playground for React Native
Today, we’re happy and excited to announce the release of Expo Snack. You can try it right now by going to https://snack.expo.io/ on your computer’s web browser.
I’ve been always excited about tools like Codepen and JSFiddle. They are awesome, because if I want to try out something small quickly, I don’t have to setup a new project which can take quite some time. And not to mention, they make sharing demos super-easy, both for the creators and people who want to try it out. You can just tweak an existing demo and see changes in real time, which is great.
Until now, React Native was lacking such a tool. To test something out, no matter how simple, you had to go through the painful and long process of creating a new project. Tools like Create React Native App and Expo make this much easier, but it’s still not quite the same experience as an online demo.
I’ve been lucky enough to be working with Charlie Cheever and Jesse Ruder on Snack for the past month, which addresses these pain points and makes it super easy to try something quickly. And today we’re excited to announce Snack to the public.
Let’s go over the features, shall we?
Instantly test your code on a device, or in the browser
Creating a new snack couldn’t be easier. Just head over to https://snack.expo.io and start typing. You can either preview the component on the emulator inside the browser, or open it directly on your device with the Expo app.
The UI updates as you type — every keystroke, without having to hit save. It’s very fast since it doesn’t use a packager to bundle the code and the code is transpiled directly on the device.
All the features of Expo at your fingertips
Snack uses Expo under the hood. That means you can use all of the Expo APIs just like you would in a regular Expo app. Facebook Login, BarCode scanner, Accelerometer, Maps, you name it.
You can also import the following third party modules which we’ve bundled with the app: @expo/vector-icons, @expo/ex-navigation, react-router-native, react-navigation, react-native-tab-view, redux, react-redux, redux-effex, redux-logger, redux-thunk, apollo-client, react-apollo, graphql-tag, ReactNativeART, art/morph/path, base-64, date-fns, gl-mat4, hsv2rgb, immutable, lodash, pubnub, regl, seamless-immutable, socket.io-client, three, url-parse, uuid-jsvalidator
Drag and drop components to add features instantly
Don’t remember how to use those APIs and too lazy to look it up and copy paste code (and fix the errors, cause you never manage get it right the first time)? Fear not, there’s a component library from where you can just drag and drop components to add a feature instantly!
See Device logs in the Editor
Need to log that object to see why your code won’t work? Or need to see the response text from an API you’re using? You can see the logs from the device directly in the editor to serve your basic debugging needs. Just do a console.log in your code and it’ll appear in the logs panel.
Integrated ESLint support
I’m one of those people who keep making typos and errors when they type, and need a computer to constantly remind them what they can or cannot do. Snack has inbuilt support for ESLint, and will scream at you when you make a syntax error.
Save and share snacks
You have made the perfect snack with the cool animation and it’s so awesome that you can’t wait to share it with world. It couldn’t be easier with snack. Hit save and share the URL with anyone. They can open the URL to preview it on their device or make changes to it in a fork.
Future plans
We’ve a lot more to improve. There are few things we still need to work on:
- Making it robust so that an error in React Native doesn’t crash the Expo app
- Make snacks embeddable so you can use it in docs and for bug reports
- Add user accounts support to snacks
Do you have ideas for improvements? Be sure to let us know in the comments.
Wanna try out some existing examples to see what you can do? I have made few examples which you can try right away:
- Auto-Hiding Header — https://snack.expo.io/SJokVF3se
- Simple Shared Transitions — https://snack.expo.io/BkDXSe4sx
- Slides with Parallax — https://snack.expo.io/B1qvkTHsg
Snack comes a long way from React Native Playground; you aren’t limited to work with a slow emulator anymore. We’re super excited about Snack, and hope you are too. We can’t wait to see what the community builds with it.
