Add support for React Native

FormidableLabs / react-live

A flexible playground for live editing React components

https://commerce.nearform.com/open-source/react-live/

MIT License

4.27k stars 239 forks source link

Add support for React Native #395

Closed flixyudh closed 1 week ago

flixyudh commented 2 weeks ago

Is there an existing issue for this?

[X] I have searched the existing issues

Code of Conduct

[X] I agree to follow this project's Code of Conduct

Feature Request

I just start to create a documentation for my React Native Libraries, and I planned to use `docusaurus` because I want to add a `Live Code` or Playground.

based on https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor I can use React Live but I don't see anyway to integrated with React Native.

is it possible to add React Native into React-Live? maybe with a help of React Native Web

carbonrobot commented 1 week ago

We won't be adding that support directly to React-Live, but if you want to try to implement it in your Docusaurus site by swizzling the scope.

npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope

This will generate a file under src/theme/ReactLiveScope where you can import things into the scope of the playground environment.

You can see where React Native Elements uses this in their website here.

Then, you can use a plugin in Docusarus to modify your webpack config as shown here

flixyudh commented 1 week ago

Great, I will try it, thank you for the insight