[docs] Move away from rnplay to snack, with embedded examples!

[brentvatne]

Motivation

React Native Playground has been sunset, so I've replaced the examples that previously used it with examples using Snack.

The examples are directly embedded and can be edited live to see updates. The code itself is also in the docs, so we can easily update the docs in one place and we don't have to actually go to a saved app on Snack and update it there.

Test Plan

Desktop docs

Run it locally, go to the Animations section and the Direct Manipulation section.

Mobile docs

Open it on your phone, notice that it falls back to just showing plain code.

Next Steps

• Get rid of the Expo new user experience dialog that you see when you open a Snack -- is this a dealbreaker for merging? (@terribleben and @jesseruder will work on this for iOS and Android respectively)
• Tone down the logo in the top right of the embed. We're thinking grayscale, slightly smaller, and no "Made with" text. (I'll work on this soon)
• The area where it says "Tap to Play" is loaded in an iframe and it slows down load time because there's a lot of JS being loaded in each iframe. I want to make loading faster by not loading the simulator iframe every time. We could instead load our own custom placeholder that's just a div with some text that you can click.
• Move logic around mapping react-native versions to Expo SDK versions to Snack, so we can just pass in whatever the docs version is without any fuss. (@jesseruder will work on this).
• Think of another way to set the name without having to encodeURIComponent on it (if you use spaces, markdown doesn't parse it as you would hope, codeblock formatting breaks).
• Remove old UIExplorer examples from docs.
• And of course, add embedded examples to more parts of the docs! Anybody can do this with relative ease.

Longer Term Next Steps

• Refactor UIExplorer such that we are able to automatically pull examples from it into SnackPlayer
• It would be nice, eventually, to unify web-player and Snack player so we have a consistent experience across the docs. cc @dabbott

[ide]

test this line specifically

[hramos]

Typo here in isRequired

[brentvatne]

derp

[hramos]

This is awesome, very excited to see an embedded Snack player in the docs! How's the performance when there's more than one Snack player on the same page?

[satya164]

Hey @hramos, not entirely sure whose performance you want to know.

The snack player is just an iframe streaming the app using appetize, so performance of simulator should not be different from the appetize emulators we use.

Having a lot of iframes can have a negative impact because iframes are blocking. But as long as we keep them to 1-2 snacks per page, it should be fine.

[hramos]

We noticed this back when we added the WebPlayer that having more than a couple on a single page could heavily impact page loading performance. 1-2 Snacks per page should be fine, I don't think we have any docs with more than a couple examples per page anyway (other than the reference docs that use the UIExplorer app).

[facebook-github-bot]

@hramos has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[brentvatne]

@satya164 @hramos

I think the main pain point is dropped frames while loading the iframe, after that afaict there is no visible impact on my MBP. I'd like to resolve this by only loading the iframe when the user requests to preview the app. The plan for this is roughly outlined in my original comment:

The area where it says "Tap to Play" is loaded in an iframe and it slows down load time because there's a lot of JS being loaded in each iframe. I want to make loading faster by not loading the simulator iframe every time. We could instead load our own custom placeholder that's just a div with some text that you can click.

I think when we get around to this we don't have to be concerned about the number of embeds on a page. Additionally, because the embeds are fixed height we could have them only be initialized when they first become visible on screen, but I'd rather do this after the delayed iframe loading optimization because otherwise we would introduce scroll-jank as you're browsing the page rather than just initial load.

[satya164]

@brentvatne Sorry! I didn't really read what you wrote xD

[brentvatne]

Added a "Longer Term Next Steps" to the original comment, something for you to snack on (wooooooooooo boy) for now. UIExplorer automatically getting into Snack examples would be 🥇

[facebook-github-bot]

I tried to merge this pull request into the Facebook internal repo but some checks failed. To unblock yourself please check the following: Does this pull request pass all open source tests on GitHub? If not please fix those. Does the code still apply cleanly on top of GitHub master? If not can please rebase. In all other cases this means some internal test failed, for example a part of a fb app won't work with this pull request. I've added the Import Failed label to this pull request so it is easy for someone at fb to find the pull request and check what failed. If you don't see anyone comment in a few days feel free to comment mentioning one of the core contributors to the project so they get a notification.

[hramos]

Unrelated failure. Attempting to land again.