11 ms·

Introducing Sketch: A Playground for React Native from Expo (YC S16)

331 points by ccheever 10y ago

ccheever 10y ago
Hi! I worked on this and am happy to answer any questions about it :)
- grinich 10y ago
  congrats on the launch! this is really cool also reminds me a bit of shadertoy https://www.shadertoy.com https://www.shadertoy.com hopefully this will help the react native community grow even faster :)
  - jesseruder 10y ago
    Thanks! I really like how shadertoy show previews of each shader. Maybe that's something we could add eventually. Also - you can use OpenGL with this: https://sketch.expo.io/rJiYksBse https://sketch.expo.io/rJiYksBse
    - grinich 10y ago
      Small suggestion: it would be awesome if the sketch homepage listed examples and had a quick screenshot or two. most people go to react.rocks and it looks like crap. https://react.rocks/tag/ReactNative https://react.rocks/tag/ReactNative I totally understand why you need a "download the app before viewing" flow, but that requirement is now such a pervasive and hostile UX pattern for growth marketers that I bet many new visitors will just bounce before even clicking through. Maybe you can show the live preview sidebar by default and also have a button that says "See live on your device" which prompts for download+QR Right now the "Scan with Expo" landing page doesn't even make it clear there is code behind there! :) ps: the openGL demo is crashing via Appetize for me within nothing in the logs
      - jesseruder 10y ago
        Those are all really good points. We wanted to push people to download the apps because the performance is so much better than Appetize, but maybe that's not the right tradeoff. Thanks for letting me know the OpenGL demo is crashing, I'll take a look at that. edit: It looks like we have a bug with our iOS simulator build. We'll update that but for now Android Appetize works.
      - nikki93 10y ago
        The OpenGL issue is fixed now. :) Here's an example with THREE.js: https://sketch.expo.io/rkpPMg8ie https://sketch.expo.io/rkpPMg8ie Plain OpenGL: https://sketch.expo.io/SJaCWirsg https://sketch.expo.io/SJaCWirsg
- foota 10y ago
  Looks great! One suggestion, I didn't notice the first time I visited the page that the modal window prompting to open the app was a modal, I thought that it required an app download. It didn't even occur to me to click somewhere else on the page and so I just closed the tab. It wasn't until I read the article that I realized you could use it on a desktop.
  - jesseruder 10y ago
    Ah interesting point. Maybe we could make the overlay slightly more transparent?
    - tomeglenn 10y ago
      Or remove it entirely... You don't need to "scan" anything to "get started". So it's not even an accurate piece of guidance for the user. Or am I missing something?
      - jesseruder 10y ago
        Well you either need to scan or click the "Preview" button to open up Appetize. We thought it'd be good to push people towards the mobile apps since they have better performance.
  - mxstbr 10y ago
    Same here!
- deleted 10y ago
  [deleted]
- welder 10y ago
  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/
  - alexgaribay 10y ago
    That was my initial reaction as well.
    - tpowell 10y ago
      Yup.
  - sbarre 10y ago
    Yeah same here. Sketch is a pretty widely adopted tool in web development so your audiences will very likely overlap. I would re-consider the name sooner than later?
  - ccheever 10y ago
    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 10y ago
      How will you know whether it's a problem?
    - dyarosla 10y ago
      It sounds like you're turning a deaf ear to the fact that it is a problem. Both apps are used for designing applications (even though the functionality and what kind of design is different). I wouldn't be surprised if your mentors at YC have already advised you to change the name. And more people in this thread have commented on the name issue more than your product itself. "If it turns out to be a problem"- It's a problem alright.
  - deleted 10y ago
- kyriakos 10y ago
  Will we be able to add external components?
  - satya164 10y ago
    You cannot do that right now. There are a few libraries already bundled which you can use. But we are planning to work on adding this feature.
    - kyriakos 10y ago
      Or maybe if I create a custom component inside sketch, it would be nice if it's added as a template in the components toolbar.
      - jesseruder 10y ago
        That's a great idea! We need to add an accounts system before we can do that, but I'll add that to our list.
- headcanon 10y ago
  Hey, so I tried it out and wanted to see how well it functions as a "stand alone" app - I closed the expo browser tab and loaded the demo from the Expo menu, but it wasn't loading. Does the browser window need to be open by design, or is it a bug? Also, is there a way for general expo apps to get their own launcher (on Android at least)? Great work by the way, this is really awesome.
  - satya164 10y ago
    The browser communicates with the device via PubNub to send the code. So it needs to be open when previewing the app. But being able to view it on the phone without the browser is useful. Thanks for the feedback.
  - jesseruder 10y ago
    If you click save and then re-scan the QR code, that url should work without the webpage open. Let me know if it doesn't work.
- chubs 10y ago
  I just downloaded the iOS client, scanned the QR code on my computer, and the client briefly flashed up what I think matched the sketch's code, then took me to a camera screen displaying 'open up sketch.expo.io and scan the QR code to get started!' Any ideas? Idea looks very promising. Thanks
  - chubs 10y ago
    The problem was that my computer was on a corporate Wifi that wasn't allowing pubnub to work. Perhaps a more helpful error message is worth considering? Anyway, thanks for creating this tool, will enjoy checking it out.
- hackcrafter 10y ago
  This is really cool! I have been using Exponent (Expo) on a side project for 5 months and love it. Can I ask what editor this is built on? I've been considering for another project having a "live editor" for writing extensions, and this is the best ES6 + linter I've seen! Is any of this app open source?
jesseruder 10y ago
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 10y ago
  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 10y ago
    Oh the first example should be a heart that explodes when you touch it. Sounds like something went wrong loading it. Sorry about that.
level 10y ago
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 10y ago
  This is integrated! Click the Preview switch at the bottom and you'll see it.
  - level 10y ago
    I can't believe I missed that, for me that's a killer feature. I can't wait to try this out.
- faceyspacey 10y ago
  That's how the original React Native Playground from the same people (Expo) worked. Google react native playground and go try it today. It's slow with appetize. But if they are still using it for sharing links to ur creation, they are still using it and have found the perfect use case: linked demos. But it would never be fast enough for updates as u type.
zabed143 10y ago
Clipping Service India is an online outsourcing company. We provide service in the field of photo editing and graphic design, specialist in... Clipping Service India is an online offshore graphic design studio providing clipping path, Photoshop masking, image manipulation, image retouching, Color Correction, drop shadow, Reflection shadow, Multiple clipping path, raster to vector, Website image optimization, all types of photo editing service... Clipping Service India is established in order to provide image editing services through internet and this internet makes our life very easy and comfortable to communicate around the world's people within in a click on mouse. http://www.clippingserviceindia.com/index.php http://www.clippingserviceindia.com/index.php
zabed143 10y ago
Clipping Service India is an online outsourcing company. We provide service in the field of photo editing and graphic design, specialist in... Clipping Service India is an online offshore graphic design studio providing clipping path, Photoshop masking, image manipulation, image retouching, Color Correction, drop shadow, Reflection shadow, Multiple clipping path, raster to vector, Website image optimization, all types of photo editing service... Clipping Service India is established in order to provide image editing services through internet and this internet makes our life very easy and comfortable to communicate around the world's people within in a click on mouse. http://www.clippingserviceindia.com/index.php http://www.clippingserviceindia.com/index.php
Hydraulix989 10y ago
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.
- jesseruder 10y ago
  There's this project: https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web that's similar to what you're describing. The downside is that you don't have access to any of the native APIs. Since we have an actually app we're able to support contacts, camera views, geolocation, etc.
- nathan_f77 10y ago
  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 10y ago
    Definitely! http://www.reactnativeexpress.com/ http://www.reactnativeexpress.com/ uses it and it works really well for them.
st3v3r 10y ago
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 10y ago
  If you're talking about Exponent, this the same company. They rebranded recently, see https://blog.expo.io/exponent-expo-b172fb6725a7?gi=922dca1bc9bd#.mcnq2nbo6 https://blog.expo.io/exponent-expo-b172fb6725a7?gi=922dca1bc...
  - hbosch 10y ago
    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/
  - talmand 10y ago
    I would think this was in reference to Sketch the design and drawing tool. I hear it's rather popular.
dabbott 10y ago
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 10y ago
  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/)
- ccheever 10y ago
  Thank you so much! The drag and drop components list in Sketch was partly inspired by Deco. Keep up the good work :)
usaphp 10y ago
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 10y ago
  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 10y ago
    I actually lost interest and closed the tab when I saw the QR code.
    - Kiro 10y ago
      How else would they do it? QR code seems justified in this case.
      - zaidf 10y ago
        1. People want to preview the app once they have something to preview. That would probably be a more appropriate time to remind them they can see it on their phones. 2. QR codes are scary (at least for most in the American market; other countries could be different). Instead of a QR code, show a random string the user has to input. We are all used to inputting random numbers/string when doing 2-factor.
        cannuk 10y ago
        1. The point of this is it happens in real time. It starts setup with an actual working demo. Connecting it to your phone first shows that real time update 2. This is an app for developers. Developers are not scared of QR codes.
lnanek2 10y ago
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 10y ago
  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.
chrisallick 10y ago
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.
- nailer 10y ago
  Personally, I didn't understand how a chat app for software developers could in good conscience be called 'Slack'.
  - bastijn 10y ago
    That's a different discussion and type of argument than the author of the reply means to introduce here. It is not a naming conflict because of another product that is too well known to use its name (for both legal and other reasons). On your slack comment: I do understand it. Chatting is traditionally seen as not working. I'm thinking IRC times when I was young(er). Mostly social, not so much project related. It is more seen as the coffee break but online. The fact that both are often used to discuss business matter does not alter this. For me, Slack is well chosen, even though I use it mainly for work related communication nowadays.
  - arctangent 10y ago
    To answer this I suspect you need to know a bit about Stewart Butterfield, who founded Slack. A very very long time ago, SB created a social game called GNE (Game Neverending). The game (and it's participants, of whom I was one) were somewhat whimsical. Based on this, I believe the reference to "slack" is a reference to this: https://en.wikipedia.org/wiki/Church_of_the_SubGenius https://en.wikipedia.org/wiki/Church_of_the_SubGenius ("Slack" is "the ability to effortlessly achieve your goals") But I could be wrong! "Slack" (also known as float) is also something you build into a project to help minimise the risk of failure: https://en.wikipedia.org/wiki/Float_(project_management) https://en.wikipedia.org/wiki/Float_(project_management) Maybe we will never know. Judge for yourself, having read his resignation letter from Yahoo: http://www.businessinsider.com/stewart-butterfield-epic-resignation-letter-2014-8?IR=T http://www.businessinsider.com/stewart-butterfield-epic-resi...
mihaela 10y ago
Name is already taken. You should have payed attention.
hochchristoph 10y ago
Is googling a desired name ONCE before naming your product too much to ask?
headcanon 10y ago
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 10y ago
  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.
brentvatne 10y ago
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 10y ago
  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
jesseruder 10y ago
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.
deleted 10y ago
[deleted]
afghanPower 10y ago
Quick question for the creators: Isn't updating apps without running them through Apple against their TOS?
- faceyspacey 10y ago
  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.
sorenbs 10y ago
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
d0100 10y ago
And of course, I am left out of the fun. Why did I have to buy a Windows Phone...
- hh2222 10y ago
  With a little luck, maybe Microsoft is already working on React Native support for Window's phone.
  - kaasi 10y ago
    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.
sergiotapia 10y ago
Change the name fellas. Sketch is a brand new tool that's about to replace Photoshop for almost all web design work.
- NathanCH 10y ago
  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.
  - arctangent 10y ago
    The designer producing work for my team is using Sketch and it looks really good to me.
  - PStamatiou 10y ago
    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 10y ago
      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.
  - sadok 10y ago
    Sketch is already used in 60% of all the tech industry, while Photoshop and others sit in the 40%. Sorry.
  - gk3 10y ago
    lol
- dyarosla 10y ago
  This was also the first thing I thought. Sketch is a well-known (artistic) design tool. I'm sure you fellas already know that but decided to stick with it anyway. In reality, it really doesn't associate with your product all that well, definitely not when compared with the photoshop-Sketch and what it's for.
aliceyhg 10y ago
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?
nikki93 10y ago
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 10y ago
  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
evolve2k 10y ago
It's it's a Playground, maybe consider 'Expo Playground'
israrkhan 10y ago
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!
masters3d 10y ago
I'd love TypeScript Support.
modarts 10y ago
Name really needs to change.
pka 10y ago
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
dorianm 10y ago
This is history! Being able to write native apps from anywhere, from chromebooks, from any random computer, and shareable, etc.! This is extremely great!
intellix 10y ago
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.
tedmiston 10y ago
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.
matlin 10y ago
This team is honestly moving and building user requested features faster than any other team I have seen.

331 points by ccheever 10y ago

ccheever 10y ago

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

grinich 10y ago
congrats on the launch! this is really cool also reminds me a bit of shadertoy https://www.shadertoy.com https://www.shadertoy.com hopefully this will help the react native community grow even faster :)
- jesseruder 10y ago
  Thanks! I really like how shadertoy show previews of each shader. Maybe that's something we could add eventually. Also - you can use OpenGL with this: https://sketch.expo.io/rJiYksBse https://sketch.expo.io/rJiYksBse
  - grinich 10y ago
    Small suggestion: it would be awesome if the sketch homepage listed examples and had a quick screenshot or two. most people go to react.rocks and it looks like crap. https://react.rocks/tag/ReactNative https://react.rocks/tag/ReactNative I totally understand why you need a "download the app before viewing" flow, but that requirement is now such a pervasive and hostile UX pattern for growth marketers that I bet many new visitors will just bounce before even clicking through. Maybe you can show the live preview sidebar by default and also have a button that says "See live on your device" which prompts for download+QR Right now the "Scan with Expo" landing page doesn't even make it clear there is code behind there! :) ps: the openGL demo is crashing via Appetize for me within nothing in the logs
    - jesseruder 10y ago
      Those are all really good points. We wanted to push people to download the apps because the performance is so much better than Appetize, but maybe that's not the right tradeoff. Thanks for letting me know the OpenGL demo is crashing, I'll take a look at that. edit: It looks like we have a bug with our iOS simulator build. We'll update that but for now Android Appetize works.
    - nikki93 10y ago
      The OpenGL issue is fixed now. :) Here's an example with THREE.js: https://sketch.expo.io/rkpPMg8ie https://sketch.expo.io/rkpPMg8ie Plain OpenGL: https://sketch.expo.io/SJaCWirsg https://sketch.expo.io/SJaCWirsg
foota 10y ago
Looks great! One suggestion, I didn't notice the first time I visited the page that the modal window prompting to open the app was a modal, I thought that it required an app download. It didn't even occur to me to click somewhere else on the page and so I just closed the tab. It wasn't until I read the article that I realized you could use it on a desktop.
- jesseruder 10y ago
  Ah interesting point. Maybe we could make the overlay slightly more transparent?
  - tomeglenn 10y ago
    Or remove it entirely... You don't need to "scan" anything to "get started". So it's not even an accurate piece of guidance for the user. Or am I missing something?
    - jesseruder 10y ago
      Well you either need to scan or click the "Preview" button to open up Appetize. We thought it'd be good to push people towards the mobile apps since they have better performance.
- mxstbr 10y ago
  Same here!
deleted 10y ago
[deleted]
welder 10y ago
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/
- alexgaribay 10y ago
  That was my initial reaction as well.
  - tpowell 10y ago
    Yup.
- sbarre 10y ago
  Yeah same here. Sketch is a pretty widely adopted tool in web development so your audiences will very likely overlap. I would re-consider the name sooner than later?
- ccheever 10y ago
  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 10y ago
    How will you know whether it's a problem?
  - dyarosla 10y ago
    It sounds like you're turning a deaf ear to the fact that it is a problem. Both apps are used for designing applications (even though the functionality and what kind of design is different). I wouldn't be surprised if your mentors at YC have already advised you to change the name. And more people in this thread have commented on the name issue more than your product itself. "If it turns out to be a problem"- It's a problem alright.
- deleted 10y ago
kyriakos 10y ago
Will we be able to add external components?
- satya164 10y ago
  You cannot do that right now. There are a few libraries already bundled which you can use. But we are planning to work on adding this feature.
  - kyriakos 10y ago
    Or maybe if I create a custom component inside sketch, it would be nice if it's added as a template in the components toolbar.
    - jesseruder 10y ago
      That's a great idea! We need to add an accounts system before we can do that, but I'll add that to our list.
headcanon 10y ago
Hey, so I tried it out and wanted to see how well it functions as a "stand alone" app - I closed the expo browser tab and loaded the demo from the Expo menu, but it wasn't loading. Does the browser window need to be open by design, or is it a bug? Also, is there a way for general expo apps to get their own launcher (on Android at least)? Great work by the way, this is really awesome.
- satya164 10y ago
  The browser communicates with the device via PubNub to send the code. So it needs to be open when previewing the app. But being able to view it on the phone without the browser is useful. Thanks for the feedback.
- jesseruder 10y ago
  If you click save and then re-scan the QR code, that url should work without the webpage open. Let me know if it doesn't work.
chubs 10y ago
I just downloaded the iOS client, scanned the QR code on my computer, and the client briefly flashed up what I think matched the sketch's code, then took me to a camera screen displaying 'open up sketch.expo.io and scan the QR code to get started!' Any ideas? Idea looks very promising. Thanks
- chubs 10y ago
  The problem was that my computer was on a corporate Wifi that wasn't allowing pubnub to work. Perhaps a more helpful error message is worth considering? Anyway, thanks for creating this tool, will enjoy checking it out.
hackcrafter 10y ago
This is really cool! I have been using Exponent (Expo) on a side project for 5 months and love it. Can I ask what editor this is built on? I've been considering for another project having a "live editor" for writing extensions, and this is the best ES6 + linter I've seen! Is any of this app open source?

jesseruder 10y ago

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 10y ago
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 10y ago
  Oh the first example should be a heart that explodes when you touch it. Sounds like something went wrong loading it. Sorry about that.

level 10y ago

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 10y ago
This is integrated! Click the Preview switch at the bottom and you'll see it.
- level 10y ago
  I can't believe I missed that, for me that's a killer feature. I can't wait to try this out.
faceyspacey 10y ago
That's how the original React Native Playground from the same people (Expo) worked. Google react native playground and go try it today. It's slow with appetize. But if they are still using it for sharing links to ur creation, they are still using it and have found the perfect use case: linked demos. But it would never be fast enough for updates as u type.

zabed143 10y ago

Clipping Service India is an online outsourcing company. We provide service in the field of photo editing and graphic design, specialist in... Clipping Service India is an online offshore graphic design studio providing clipping path, Photoshop masking, image manipulation, image retouching, Color Correction, drop shadow, Reflection shadow, Multiple clipping path, raster to vector, Website image optimization, all types of photo editing service... Clipping Service India is established in order to provide image editing services through internet and this internet makes our life very easy and comfortable to communicate around the world's people within in a click on mouse. http://www.clippingserviceindia.com/index.php http://www.clippingserviceindia.com/index.php

zabed143 10y ago

Hydraulix989 10y ago

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.

jesseruder 10y ago
There's this project: https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web that's similar to what you're describing. The downside is that you don't have access to any of the native APIs. Since we have an actually app we're able to support contacts, camera views, geolocation, etc.
nathan_f77 10y ago
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 10y ago
  Definitely! http://www.reactnativeexpress.com/ http://www.reactnativeexpress.com/ uses it and it works really well for them.

st3v3r 10y ago

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 10y ago
If you're talking about Exponent, this the same company. They rebranded recently, see https://blog.expo.io/exponent-expo-b172fb6725a7?gi=922dca1bc9bd#.mcnq2nbo6 https://blog.expo.io/exponent-expo-b172fb6725a7?gi=922dca1bc...
- hbosch 10y ago
  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/
- talmand 10y ago
  I would think this was in reference to Sketch the design and drawing tool. I hear it's rather popular.

dabbott 10y ago

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 10y ago
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/)
ccheever 10y ago
Thank you so much! The drag and drop components list in Sketch was partly inspired by Deco. Keep up the good work :)

usaphp 10y ago

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 10y ago
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 10y ago
  I actually lost interest and closed the tab when I saw the QR code.
  - Kiro 10y ago
    How else would they do it? QR code seems justified in this case.
    - zaidf 10y ago
      1. People want to preview the app once they have something to preview. That would probably be a more appropriate time to remind them they can see it on their phones. 2. QR codes are scary (at least for most in the American market; other countries could be different). Instead of a QR code, show a random string the user has to input. We are all used to inputting random numbers/string when doing 2-factor.
      - cannuk 10y ago
        1. The point of this is it happens in real time. It starts setup with an actual working demo. Connecting it to your phone first shows that real time update 2. This is an app for developers. Developers are not scared of QR codes.

lnanek2 10y ago

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 10y ago
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.

chrisallick 10y ago

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.

nailer 10y ago
Personally, I didn't understand how a chat app for software developers could in good conscience be called 'Slack'.
- bastijn 10y ago
  That's a different discussion and type of argument than the author of the reply means to introduce here. It is not a naming conflict because of another product that is too well known to use its name (for both legal and other reasons). On your slack comment: I do understand it. Chatting is traditionally seen as not working. I'm thinking IRC times when I was young(er). Mostly social, not so much project related. It is more seen as the coffee break but online. The fact that both are often used to discuss business matter does not alter this. For me, Slack is well chosen, even though I use it mainly for work related communication nowadays.
- arctangent 10y ago
  To answer this I suspect you need to know a bit about Stewart Butterfield, who founded Slack. A very very long time ago, SB created a social game called GNE (Game Neverending). The game (and it's participants, of whom I was one) were somewhat whimsical. Based on this, I believe the reference to "slack" is a reference to this: https://en.wikipedia.org/wiki/Church_of_the_SubGenius https://en.wikipedia.org/wiki/Church_of_the_SubGenius ("Slack" is "the ability to effortlessly achieve your goals") But I could be wrong! "Slack" (also known as float) is also something you build into a project to help minimise the risk of failure: https://en.wikipedia.org/wiki/Float_(project_management) https://en.wikipedia.org/wiki/Float_(project_management) Maybe we will never know. Judge for yourself, having read his resignation letter from Yahoo: http://www.businessinsider.com/stewart-butterfield-epic-resignation-letter-2014-8?IR=T http://www.businessinsider.com/stewart-butterfield-epic-resi...

mihaela 10y ago

Name is already taken. You should have payed attention.

hochchristoph 10y ago

Is googling a desired name ONCE before naming your product too much to ask?

headcanon 10y ago

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 10y ago
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.

brentvatne 10y ago

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 10y ago
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

jesseruder 10y ago

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.

deleted 10y ago

[deleted]

afghanPower 10y ago

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

faceyspacey 10y ago
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.

sorenbs 10y ago

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

d0100 10y ago

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

hh2222 10y ago
With a little luck, maybe Microsoft is already working on React Native support for Window's phone.
- kaasi 10y ago
  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.

sergiotapia 10y ago

Change the name fellas. Sketch is a brand new tool that's about to replace Photoshop for almost all web design work.

NathanCH 10y ago
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.
- arctangent 10y ago
  The designer producing work for my team is using Sketch and it looks really good to me.
- PStamatiou 10y ago
  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 10y ago
    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.
- sadok 10y ago
  Sketch is already used in 60% of all the tech industry, while Photoshop and others sit in the 40%. Sorry.
- gk3 10y ago
  lol
dyarosla 10y ago
This was also the first thing I thought. Sketch is a well-known (artistic) design tool. I'm sure you fellas already know that but decided to stick with it anyway. In reality, it really doesn't associate with your product all that well, definitely not when compared with the photoshop-Sketch and what it's for.

aliceyhg 10y ago

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?

nikki93 10y ago

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 10y ago
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

evolve2k 10y ago

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

israrkhan 10y ago

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!

masters3d 10y ago

I'd love TypeScript Support.

modarts 10y ago

Name really needs to change.

pka 10y ago

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

dorianm 10y ago

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

intellix 10y ago

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.

tedmiston 10y ago

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.

matlin 10y ago

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