search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.48k stars 182 forks source link

React Native support #63

Open tonyxiao opened 5 years ago

tonyxiao commented 5 years ago

At first glance it does not seem that playroom supports react native. What would need to be in place for this to work on mobile / are there alternatives?

markdalgleish commented 5 years ago

Would you be able to go into a bit more detail about your expectations for how Playroom would support React Native?

tonyxiao commented 5 years ago

I'm imagining something very similar to the way storybook / expo snack works (https://snack.expo.io/). There would be a server and a client. The write code in web ui, scan QR code on mobile device to get preview.

tonyxiao commented 5 years ago

Except instead of having to write fully valid js / import anything, you only get to use what's defined in the design system playroom-style

alechp commented 5 years ago

@tonyxiao Are the missing API's in https://github.com/necolas/react-native-web your primary blocker? Curious because I currently use Expo/Storybook/React Native. Planning on using Playroom as well. Would like to know where there might be dragons.

tonyxiao commented 5 years ago

@alechp I never got deep enough to find blockers. Would love to hear your experience tho.

alechp commented 5 years ago

@alechp I never got deep enough to find blockers. Would love to hear your experience tho.

Me neither. Still a few weeks away from diving in. My guess is that the biggest blocker will be playroom not having an extensible webpack config. In the react-native-web docs, there's a Storybook integration where react-native-web extends Storybook's webpack config to alias react-native-web to react-native.

mobimation commented 4 years ago

I was impressed coming across Playroom now half a year later.. I see definitive potential in a "Playroom variant" for React Native. A very common basic design case in native is the type of form design unfolding in the demo @markdalgleish ran at ReactiveConf 2019. See: https://www.youtube.com/watch?v=jnV1u67_yVg&t=3m29s In Playroom there is a live representation of typing in JSX code that instantly becomes shown in web view format. In the native case viewing would might need to involve Android and iOS emulators which in current stage of tech would reveal a delay for 'hot reload' refresh. Expo "Snack" tooling ( https://snack.expo.io/ seem to be heading in a usable direction to be able to render the set of react-native-community packages in own emulator windows. ( But the instant view wizardry seems monetized by https://appetize.io/... ) In short a challenge is how to go about the native component rendering in a live editor scenario.

alexbchr commented 4 years ago

I recently integrated Playroom in our Cubes library. Cubes is a library for quick prototyping of Apps, built with Expo, React Native and React Native Web. Feel free to consult if you want an example of Playroom working with React Native Web.

Of course, the Playroom integration only uses the React Native Web portion of our library... However, we have plans to eventually extend Playroom features to be more accessible on mobile devices.