Trouble using storybook on Ignite boilerplate project

[mobitinker]

If I create a new ignite boilerplate project (which has storybook already) and try "npm run storybook" and browse to http://localhost:7007 I see the storybook on the browser but no stories are listed. I would expect the two button stories, one with text, one with emojis.

On a related note, if I remove the storybook dirs from the project and do this: npm install --global @storybook/cli cd [your-app] getstorybook yarn run storybook

I get the expected storybook running on my device.

I'd like to be able to use storybook during design running it in a browser on my desktop to see styling. At some point I'd like to run it on device but that's less important. I'm new to RN so I could be missing something obvious but at the moment it does not look like I can use storybook in conjunction with the ignite boilerplate.

[danielduan]

@mobitinker I'm not sure what you mean by ignite boilerplate project. Do you have a link to it?

Unfortunately, react-native does not run in the browser. The storybook and its addons will run in the browser and connect to your phone, but the actual components can only be displayed on your phone or the simulators.

[mobitinker]

Hi! Thanks for your reply. The ignite boilerplate is at: https://github.com/infinitered/ignite-ir-boilerplate

Is it possible to run storybook in the browser against the components in my React-Native app? The components, at present, are purely presentational and don't reference RN features.

I cloned the example from backpack-ui and it seemed to work out ok.

On Thu, Sep 28, 2017 at 10:32 AM, Daniel Duan notifications@github.com wrote:

@mobitinker https://github.com/mobitinker I'm not sure what you mean by ignite boilerplate project. Do you have a link to it?

Unfortunately, react-native does not run in the browser. The storybook and its addons will run in the browser and connect to your phone, but the actual components can only be displayed on your phone or the simulators.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/storybooks/storybook/issues/1903#issuecomment-332908513, or mute the thread https://github.com/notifications/unsubscribe-auth/AAXjPRz-OQVdniHOAVe30s6azb8OjYRuks5sm9hAgaJpZM4PmVGc .

-- Mark Murphy, 503-809-1141, LinkedIn http://www.linkedin.com/in/markkmurphy

[danielduan]

Backpack-ui is written in react for the web. It seems like you're a bit confused on react vs. react-native.

React is a javascript web rendering library and react-native builds on top of it to adapt the same concepts to native iOS and Android components. While the underlying platform is the same, the "view" that's manipulated is different because react-native is an abstraction of iOS/Android components and react uses HTML DOM elements.

When you write react-native components, you use things like <View> and <TextInput> instead of HTML elements such as <div> and <input>.

Many people including myself have been using react and react-native to create components that render cross platform and share some of the same underlying javascript. You will basically have to write a separate render function for each platform that you target whether it's web, iOS, or Android.

When you say you are building purely presentational components, you are in fact using react-native because the boilerplate <View> and other components come from the react-native library through import { View } from 'react-native';.

Hope this helps.

[mobitinker]

Thanks for patiently helping me with that distinction. I started with React-Native and assumed etc were used in React as well. Doh. It makes so much more sense now! Eight days into learning the whole RN ecosystem with no previous ReactJS experience, I'm still feeling overwhelmed ;-)

On Thu, Sep 28, 2017 at 11:32 AM, Daniel Duan notifications@github.com wrote:

Backpack-ui is written in react for the web. It seems like you're a bit confused on react vs. react-native.

React is a javascript web rendering library and react-native builds on top of it to adapt the same concepts to native iOS and Android components. While the underlying platform is the same, the "view" that's manipulated is different because react-native is an abstraction of iOS/Android components and react uses HTML DOM elements.

When you write react-native components, you use things like and

instead of HTML elements such as

and . Many people including myself have been using react and react-native to create components that render cross platform and share some of the same underlying javascript. You will basically have to write a separate render function for each platform that you target whether it's web, iOS, or Android. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or mute the thread .

-- Mark Murphy, 503-809-1141, LinkedIn http://www.linkedin.com/in/markkmurphy

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 60 days. Thanks!