Storybook: React native support

[tonyxiao]

How complicated would it be to adapt this for developing react native components?

[mnmtanish]

@tonyxiao it's not as complicated as one would think :)

With the Mantra module system, we should be able to just replace the preview module and use it to send/receive messages with a react-native app. We're still only planning this feature so can't say anything for now. We'll notify when we have a working POC.

[arunoda]

Most probably in this week.

[j6k4m8]

Is there a status report on this? Just decided to start using Storybook for our web app and we'd love to use it for native too! (Would totally devote some dev hours to this if it were a relatively short-term goal)

cc @tuckerchapin

[grabcode]

@tonyxiao @j6k4m8 I'm happy to share with you my attempt to solving this react-native/web gap with my React Native for Web Starter. In a nutshell, I plan on developing a webapp and later on launch a v2, native, as it may need depth sensors.

[tonyxiao]

@grabcode awesome. At first glance it seems to render native components into web browser?

[grabcode]

That is what it does mate. Check it out and contribute!

[gisenberg]

@mnmtanish @arunoda Any update on this issue? Are you looking for help?

[mnmtanish]

@tonyxiao as promised earlier, here's the POC. It works but need to jump through a few hoops. We still have some major issues to fix, write docs, contributor guides, etc. before announcing it.

Check these repos and issues but please note that it's possible that it may change dramatically over following few days:

• https://github.com/kadirahq/react-native-storybook
• https://github.com/kadira-samples/react-native-button

If you really want to try it out right now:

git clone https://github.com/kadira-samples/react-native-button
cd react-native-button
npm install
npm run storybook

(in another tab)
react-native run-ios

Enable Remote JS Debugging or it won't work for now (https://github.com/kadirahq/react-native-storybook/issues/3). And it only works on OSX with the iOS simulator.

@gisenberg @j6k4m8 I'll update here as soon as the contributor guide is ready and thanks :)

[mnmtanish]

@arunoda @grabcode It'll be awesome if we can render the component using react-native-web instead of the "Please check your device/simulator" text. It can also be used for the static build to push to gh-pages.

[arunoda]

@mnmtanish react-native-web is a tiny subset of component of React Native. So, spending time on that is not wise.

May be we can stream the device's screen and render it on the web :)

[deeptiagrawa]

@mnmtanish: Is there any configuration file that need to be setup to load the stories like .storybook/config.js we have in react-storybook. I tried cloning react-native-button repo but no stories get loaded.

[mnmtanish]

@deeptiagrawa Yes, configuration quite similar to react-storybook but the directory name has changed. Use storybook (without the leading dot) instead of .storybook. Stories will appear only after a device connects. I've updated the README here with a short guide to help get started.

[mnmtanish]

React Native Storybook is quite stable right now so I'll close this issue.

[tonyxiao]

oh wow this is awesome!

[zzztuzzz]

great! THX your Hackness!!

[csooraj]

Is there any way to build the android apk using the browser ie. when the user will fill out the prop values of components and when he clicks build the app will be generated with that values.