Add demos for React Native using Snack about styled-components-website HOT 11 CLOSED

@mxstbr Any chance you've got an idea for an outline of this section and an idea on how to make the live demos work? Can we maybe use react-native-web for those live demos?

https://github.com/necolas/react-native-web

from styled-components-website.

@jacobp100 I've seen on this issue, that you'd like to add some more content for React Native. Do you have an idea about the Snack embed as well? I'm not really sure how well it would play with the rest of site :/

styled-components/styled-components#709

from styled-components-website.

Appetize is one solution. What does this provide over screenshots and the occasional gif?

from styled-components-website.

@philpl lemme know if you have any specific concerns about the embed widget. The styles are pretty neutral, so it should blend in with any website. I'm open to tweak it further if there are specific things you don't like.

@jacobp100 https://blog.expo.io/sketch-a-playground-for-react-native-16b2401f44a2

from styled-components-website.

I'm not opposed to adding it. What's the aim with this?

I think we assume they know React Native styling, and we're just telling them how things translate. In which case, do they need live demos?

Or maybe we assume they've never used React Native before?

from styled-components-website.

@jacobp100 I believe the current section on React Native won't get much longer anyway. And adding a demo for something that is arguably identical to how it works on the web is... unnecessary, dare I say

https://sc-next-docs.philpl.com/docs/basics#react-native

from styled-components-website.

There's actually a lot more to say about ReactNative @philpl. I want that to be its own section that explains all the features @jacobp100 built into css-in-react-native, with live demos and all that jazz.

We don't have a lot of traction in the ReactNative community yet, and the big reason for that is that folks aren't aware they can use styled-components in ReactNative. Having an dedicated section that explains all the differences with live demos would help a lot there!

from styled-components-website.

Why do we not want to use Snack?

from styled-components-website.

@mxstbr So I had a couple of things in mind when thinking Snack vs React Native Web:

• Right now the site is 100% viewable and usable on a mobile device. The code is readable and the demos are visible. (I'd assume that no-one would want to edit them on a phone though)

• We've got a service worker so that every page of the docs that a user has visited is available offline, with the demos intact. This is obviously not possible with Snack

• Our demos for web are rather snappy, Snack is slower

• I've got some accessibility concerns with Snack, but nothing extraordinary actually

On the other hand though, with Snack we get:

• The awesome QR codes that make it possible to try examples out

• Demos on actual simulators

It's not fully clear which of these arguments are more or less important to us. :/

from styled-components-website.

You could chose to use React Native for Web, but it's not React Native. Feature set on web is hugely different from native, and it will give false impression of things working in a demo which doesn't actually work in a real device. IMO if you're not providing a real demo, there's not much point of having a demo for React Native since it's not any different from rest of the demos.

On a mobile device, snack doesn't show the emulator, but people can directly open the demo in Expo app. You still see the demo, just not in the browser, which seems reasonable to me since React Native is not the browser.

When offline, you can fallback to a simple code block rather than loading snack iframe. The demo needs internet to work, so won't possible to have a demo when offline, but unfortunately that's the best we can do currently. No demo when offline is better than no demo at all.

Snack will be slower, because it loads a full featured code editor. Even though I'm constantly trying to make it load as less code as possible, it will never match simple code blocks when loading speed is concerned.

Also it might be possible to use your current code block component and use snack, though I need to confirm this. I'd appreciate if we could figure out the things we need to improve, one of the goals of snack was to be able to embed it in documentation, and I want to identify issues which discourage people from doing that.

from styled-components-website.

FYI snack embeds now use https://github.com/satya164/react-simple-code-editor which reduces the footprint by a huge amount.

from styled-components-website.