
Introducing Sketch: A Playground for React Native from Expo (YC S16) - ccheever
https://blog.expo.io/sketch-a-playground-for-react-native-16b2401f44a2#.2fzbgbca8
======
sergiotapia
Change the name fellas. Sketch is a brand new tool that's about to replace
Photoshop for almost all web design work.

~~~
NathanCH
Brand new? And no, I don't think so. Sketch is awesome but it isn't a
substitute for work that you would do in Photoshop.

Unless you were doing wireframes in Photoshop.

~~~
PStamatiou
I'm a designer at Twitter and our design team has been using Sketch for UI
design for the last few years. I believe the same situation occurs at FB and
many other design teams unless doing very particular photo work or
iconography/illustration.

~~~
NathanCH
I don't disagree with that. I also work at Twitter and use Sketch.

I'm just saying that Sketch is not a substitute for Photoshop. It never was,
nor should be. You completely misunderstood me.

------
dabbott
Great job Expo team! :)

I think between Sketch and Create-React-Native-App, you guys are solving the
single biggest problem in React Native right now: getting started. The
relatively complex environment setup really discourages newcomers. Once they
try it in the browser first, they're sure to love it :) After that, Create-
React-Native-App makes setting up a breeze.

I plan on using both of these things in my React Native classes, since they're
going to save a lot of time and effort!

~~~
brentvatne
Sketch, create-react-native-app and React Native Express are a great combo I
think ;)

(for people who aren't aware of it, React Native Express is a fantastic site
for getting your bearings with React Native:
[http://www.reactnativeexpress.com/](http://www.reactnativeexpress.com/))

------
chrisallick
I really don't understand how this product can be called Sketch in good
conscience. Sketch is already a disruptive gorgeous product that has changed
ux and digital design. It should be respected and given room to breathe.
Change the name of your product.

~~~
ccheever
We think the products are so different that people won't get confused but if
it turns out to be a problem, we'll figure something out.

Sketch the design tool is great. We use it.

~~~
lyime
Why not just call it React Native Playground? or Expo Playground.

~~~
reneherse
"React Playground" would be a good possibility, too.

------
usaphp
For anyone who does not understand why it always shows a QR code and a
"Download from app store" buttons, there is a close button on top right corner
to close that modal.

Not sure it was a great idea to always show that modal, it took me a while to
figure out that I can close it, I thought it's an ios app...

~~~
satya164
We show the QRCode because you need to scan it and open on the phone to be
able to view it.

Yeah, we will change the styles to make it more obvious that it's modal. Sorry
for the confusion.

~~~
abuzzooz
I actually lost interest and closed the tab when I saw the QR code.

~~~
Kiro
How else would they do it? QR code seems justified in this case.

~~~
abuzzooz
Sorry, I should have clarified.

I'm not against using QR codes. I just didn't realize that I could close the
modal window, and thought that I had to jump through hoops to try out Sketch.

Given the amount of crap that can be found on the internet, I have a very low
threshold for losing interest.

A better approach would have been to remind me later than I can scan a QR code
to access the page on my mobile device.

~~~
Kiro
The thing is that you need the Expo app on your phone to even try it out. Just
closing the modal will show you the code but nothing else unless you installed
the app and scanned the QR code.

I understand your point though. I suppose they can improve it.

------
brentvatne
Here's a fun example of a pretty common UI pattern -- the header transitions
into another as you scroll, and the hero image scales / fades depending on
scroll position too:
[https://sketch.expo.io/SyVvB3Hjx](https://sketch.expo.io/SyVvB3Hjx) \-- it
uses React Native's native animated driver with ScrollViews :)

~~~
dorianm
Thanks for sharing, this seems like the new jsbin/jsfiddle/codepen for native
apps.

There should definitely a list of those, so I started one:
[https://github.com/Dorian/sketch-reactive-native-
apps](https://github.com/Dorian/sketch-reactive-native-apps)

------
headcanon
I will grant you the initial QR code bit was a tad confusing (might be fixed
with messaging), but when I made my first change and saw it reflected
immediately on my phone I was instantly floored. This is really incredible
guys keep it up!

~~~
ccheever
Thanks! The magical feeling from seeing things update right away after every
keystroke is my favorite part of it too.

We'll keep working on making the flow of navigating to your sketch on your
phone as smooth as possible. Certainly some work to do there.

------
level
I imagine an integration with Appetize[1] would be very useful, as well as an
opening for a possible revenue stream. Being able to build an RN app and then
run it right in the browser removes another barrier for sharing RN code
easily.

[1] [https://appetize.io/](https://appetize.io/)

~~~
ccheever
This is integrated! Click the Preview switch at the bottom and you'll see it.

~~~
level
I can't believe I missed that, for me that's a killer feature. I can't wait to
try this out.

------
nikki93
A couple graphics demos:

Basic THREE.js example:
[https://sketch.expo.io/rkpPMg8ie](https://sketch.expo.io/rkpPMg8ie)

OpenGL "from scratch" (no wrapper libraries):
[https://sketch.expo.io/SJaCWirsg](https://sketch.expo.io/SJaCWirsg)

~~~
t1amat
Very nice! I'll shamelessly add a little Game of Life comparison in SVG[1] and
REGL[2].

[1]: [https://sketch.expo.io/H1Z4WGIix](https://sketch.expo.io/H1Z4WGIix)

[2]: [https://sketch.expo.io/HkjUrfIje](https://sketch.expo.io/HkjUrfIje)

------
israrkhan
Yesterday, I played around with CRNA (and it was amazing). This is even more
useful. You can get started here, do quick prototype, and as things start to
get more complicated, move to CRNA project. Do rest of the stuff in CRNA, and
when CRNA cannot handle it, do an eject!

------
sorenbs
Expo is awesome and Sketch looks like the best way to get started. Great work!

In my opinion Expo and GraphQL is a power combo and it so happens that we just
released a new cli to generate hosted GraphQL apis (also on the frontpage) so
that would be a really easy way to get started.

[https://news.ycombinator.com/item?id=13870379](https://news.ycombinator.com/item?id=13870379)

------
mihaela
Name is already taken. You should have payed attention.

------
aliceyhg
My team usually checks out each other's branch and runs the mobile app in
simulator during code review. I see this tool being incredible addition to dev
teams if instead of checking out a dev's branch and running the app on
reviewer's simulator, the reviewer could just play with it using expo. Is this
a use case you are considering?

------
jesseruder
Here's an example we made using the Animated library:
[https://sketch.expo.io/HyobXP7oe](https://sketch.expo.io/HyobXP7oe)

And a basic SVG example:
[https://sketch.expo.io/H1ucC8Xsg](https://sketch.expo.io/H1ucC8Xsg)

~~~
swah
Note: the blinking Expo logo in the first example is the actual example, not a
loading screen for something ;)

Took me 2 minutes to figure that out...

~~~
jesseruder
Oh the first example should be a heart that explodes when you touch it. Sounds
like something went wrong loading it. Sorry about that.

------
Hydraulix989
Ah, so you have an app that links to the "fiddle" and downloads the RN JS
bundle and runs it for you, instead of an emulator. Nice!

I'm still trying to figure out whether it is possible to run RN directly in
the browser using an interpreter instead of an emulator, along with something
like emscripten (might have to run an emscripten-compiled JVM, too haha).
Sounds really tricky, for one thing, any Android or iOS SDK calls would need
intercepted and re-written for the browser, much like what WINE does.

~~~
nathan_f77
I've written a little game in React Native, and I was really surprised when
react-native-web just worked almost out of the box. If you don't have many
native libraries, then it's really easy to write an app that works in a
browser.

~~~
jesseruder
Definitely!
[http://www.reactnativeexpress.com/](http://www.reactnativeexpress.com/) uses
it and it works really well for them.

------
jesseruder
We just deployed a change to make the modal overlay more transparent.
Hopefully this will make it more obvious that there's an editor underneath the
modal.

------
ccheever
Hi! I worked on this and am happy to answer any questions about it :)

~~~
welder
My initial reaction was to associate this with Sketch App for Mac [1]. How do
you plan to prevent confusion?

[1] [https://www.sketchapp.com/](https://www.sketchapp.com/)

~~~
ccheever
We thought it was such a different product that people wouldn't be confused at
all. But if it turns out to be a problem, we'll figure something out. Thanks
for the feedback!

~~~
rhizome
How will you know whether it's a problem?

------
d0100
And of course, I am left out of the fun. Why did I have to buy a Windows
Phone...

~~~
hh2222
With a little luck, maybe Microsoft is already working on React Native support
for Window's phone.

~~~
kaasi
[https://github.com/Microsoft/react-native-
windows](https://github.com/Microsoft/react-native-windows)

Works well enough that I was able to get up and running with a Windows
Universal app on hololens.

------
dorianm
This is history! Being able to write native apps from anywhere, from
chromebooks, from any random computer, and shareable, etc.! This is extremely
great!

------
pka
So now if something like this gets integrated into the OS and gets deeplink
support and some OS-wide back button on the desktop [0] I think we actually
may be one step closer to interlinked, insta-updateabble, native apps!

Maybe we'll someday see the browser dethroned after all...

[0] [https://github.com/ptmt/react-native-
macos](https://github.com/ptmt/react-native-macos)

------
lnanek2
Seems really similar to the React Native tutorials where you can already type
in a text box and see changes in a phone preview immediately:
[https://facebook.github.io/react-
native/docs/tutorial.html](https://facebook.github.io/react-
native/docs/tutorial.html)

~~~
jesseruder
Those examples are using this library: [https://github.com/necolas/react-
native-web](https://github.com/necolas/react-native-web). It's really fast but
the downside is that you can't use any native APIs, so things like gyroscope
and push notifications won't work. Since we have an actual app we're able to
support all those APIs.

------
tedmiston
Anyone else stuck on the loading (maybe error?) screen, after clicking the
"Open with Expo" button on iOS?

> This is taking a while… Press this text to stop loading and scan another QR
> code.

------
st3v3r
So, when you came up with the name, did you look in the mobile space to see
if, maybe, there was another popular tool with the same name that might be
confusing?

~~~
mxstbr
If you're talking about Exponent, this the same company. They rebranded
recently, see [https://blog.expo.io/exponent-
expo-b172fb6725a7?gi=922dca1bc...](https://blog.expo.io/exponent-
expo-b172fb6725a7?gi=922dca1bc9bd#.mcnq2nbo6)

~~~
hbosch
I think he's talking about the app Sketch[0], which is very popular amongst UI
designers.

0\. [https://www.sketchapp.com/](https://www.sketchapp.com/)

------
intellix
Sketch to React Native... awesome! oh wait, it's just the exact same name and
has nothing to do with Sketch at all. Name should be changed IMO.

------
matlin
This team is honestly moving and building user requested features faster than
any other team I have seen.

------
afghanPower
Quick question for the creators: Isn't updating apps without running them
through Apple against their TOS?

~~~
faceyspacey
Not the way Expo, Microsoft Code Push, and myriad other tools work that have
been doing it for years now. In short, updating the js is not against the tos.
No new native code is updated over the wire.

------
masters3d
I'd love TypeScript Support.

------
evolve2k
It's it's a Playground, maybe consider 'Expo Playground'

------
modarts
Name really needs to change.

