Storybook does not work with Expo about react-native HOT 34 CLOSED

from react-native.

Windows 10
node 12.18.0
Storybook 5.3.19
expo 38.0.8
In browser Google Chrome 84.0.4147.8 or Firefox 78.0.2 there is "forever stories loading" on the left panel

Any ideas how to fix it? btw its works fine in android emulator when i run command "expo start --android"

from react-native.

Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.

Having the same issue!

from react-native.

Closing this issue. If you have any issues feel free to open a separate issue!

@alechp if you could notify here does the adb reverse command solve your issue.

from react-native.

This happened to me, turned out to be a configuration issue. Following this helped me get it setup:
https://github.com/expo/examples/tree/master/with-storybook

from react-native.

First part of this issue is duplicate to storybookjs/storybook#5893

Second part may need some investigation cc @benoitdion

from react-native.

@alechp @shilman Thank you both. That migration guide for 5.1 lgtm, I'll have to check it out when I get home though.

Cheers

from react-native.

@shilman got alpha 40 running. Current errors being thrown:

In Expo

Unable to resolve "emotion-theming" from "node_modules/@storybook/react-native/dist/preview/index.js"

Added context

• Stories never load in browser
• Bundler never moves past 99%
• I've rmraf'd my node_modules directory a couple times to no avail

UPDATE:
If I add emotion-theming as a peer dependency (with yarn), now there's a new missing dependency:

Unable to resolve "@emotion/core" from "node_modules/emotion-theming/dist/emotion-theming.browser.cjs.js"

I can keep adding missing modules, but obviously this isn't right.

UPDATE 2:
Got it working. Had issues when adding emotion-theming and @emotion/core as peer deps. Added them as dev deps and it seems to have resolved whatever linking issues I was running into before. Still not ideal to have to add; might be worth it to upgrade the migration guide to include these steps in the meantime (during the babel-loader install step).

UPDATE 3:
On the topic of migration guide, you might want to add that the simulator (I'm doing all of my testing on iOS sim, haven't tried Android emu) needs to be running otherwise Storybook stories will not load.

from react-native.

Consider using expo 33 with expo start --web, it works for me.

from react-native.

Hey, if android doesn’t work remember to run adb reverse tcp:7007 tcp:7007 . Does that help @alechp?

@shilman this issue is really big and talking about 10 different issues, most of them are solved. Not sure what is left to fix here.

from react-native.

in my case the think is that main file is different with expo and story book.

The left loading panel forever is because by default story book loads a part of de index.js in --web but the folders with examples of stories are only --ios and --android. So is tricky but you can make a "switch" and define what loader wants.

Example:

I made a switch navigator in my app.
const switchNavigator = createSwitchNavigator( { UserLogged: DrawerLogged, UserNoLogged: DrawerNavigator, AuthLoadingScreen: AuthLoadingScreen, StoryBook: StoryBookLoader }, { initialRouteName: 'StoryBook', } );

`import React from 'react';
import StorybookUIRoot from '../../../storybook';

const StoryBookLoader = ({ }) =>
export default StoryBookLoader;`

So when i want to work with StoryBook, i follow these steps:
expo start
read qr with my phone or emulator
change initialRoute of my switch navigator to "StoryBook"
And that's then all default config and docs in StoryBook docs.

Hope worth for someone :)

from react-native.

@igorgidea
I have same issue.
Please anyone resolve it. ;-(

from react-native.

Update:

I went through the guide on the site again and the best I am able to do is get storybook running in the browser. However it is not picking up any of the stories.

As for my app, since I replaced the app entry point with ./storybook it only shows text that says to visit the browser on port 7007 (which, again, shows empty storyboard)

from react-native.

Ok, so, I haven't tried installing it in an expo init'd project, but using crna I got it to work by doing the following:

1. run npx -p @storybook/cli@next sb init
2. Change APP_NAME to whatever the appKey is. Note This property is oddly missing from app.json so you need to add it. The instructions in storybook's index file say that you don't need to change it if you are using expo...this seems to be incorrect.

Now, using npm run storybook does not load stories, but at least it seems to work on my mobile device.

This whole thing is really frustrating.

from react-native.

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

from react-native.

NOTE: This doesn't address kristremblay's concern re: latest version interoperability. I'm simply sharing this for others that are stuck and just want storybook to work (without waiting for storybook/expo-cli latest-version interoperability)

Non-ideal quick fix: when installing storybook, choose v4.1.18.

Got storybook v4.1.18 working with latest version of expo init.

1. $ expo init projectName
2. $ cd projectName
3. $ npx -p @storybook/cli sb init
4. $ yarn install
5. $> choose version 4.1.18
6. $ yarn start

(Also at some point during the Storybook install you have to choose your output. I selected REACT_NATIVE)

from react-native.

@kristremblay please take a look at the migration instruction for 5.1: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

from react-native.

@kristremblay In case you didn't have time to finalize yet, I put together a finished repo as a reference. Great catch on the appKey btw. The "don't need to do this if you're using expo" threw me as well. Glad you caught it.

react-native-expo-storybook-v5

@shilman I noticed that I was running into compilation issues with addons. Ended up just removing it (obviously not ideal, but I assume this is specific to react-native-server ?)

from react-native.

Thanks @alechp . What issues were you having? I know there were some addon-related issues in RN 5.1 but I'm not sure if they're documented or tracked, so if you let me know it would help us with the release. Also, are you on the latest alpha? 🙏

from react-native.

Thanks @alechp . What issues were you having? I know there were some addon-related issues in RN 5.1 but I'm not sure if they're documented or tracked, so if you let me know it would help us with the release. Also, are you on the latest alpha? 🙏

I received this compile time error:

ERROR in ./storybook/addons.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only function

Here's the package:
https://github.com/servexyz/react-native-expo-storybook-v5/blob/master/package.json

In terms of https://www.npmjs.com/package/@storybook/cli I chose whatever the latest version listed was... I recall it was a .3. Looking at the package version releases, I believe it was 5.2.0-alpha.3

UPDATE (11:19AM PST): Confirmed that the version I installed from was 5.2.0-alpha.3:

Notice that you tagged my previous repo comment to the 5.1.0 milestone. Should it be tagged to 5.2.0 instead?

from react-native.

@shilman Update: Here's the original error (returns when I add addons.js back to storybook/ directory

You can recreate this by

1. cloning the repo I posted earlier (react-native-expo-storybook-v5)
2. $ touch storybook/addons.js
3. copy this to clipboard:

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

4. $ pbpaste > storybook/addons.js

from react-native.

@alechp Please use the latest 5.1.0 version. The 5.2.0 version may be messed up -- it's a long story.

from react-native.

@shilman Not sure if this is a bug of alpha40 or supposed to be a feature of Storybook:

Whenever I run yarn install it asks me to select the storybook version.

eg. I installed the Storysource addon (https://github.com/storybooks/storybook/tree/master/addons/storysource)

via yarn add @storybook/addon-storysource --dev

and was prompted to choose the install version again:

It also seems to re-run if I run yarn install by itself (ie. even when I'm not adding a storybook-specific dependency). Is there anyway to disable this hook? It seems unnecessarily time consuming

from react-native.

@alechp Not sure what's going on there. @benoitdion have you seen this?

from react-native.

I haven't seen this. What does your package.json look like?

from react-native.

I haven't seen this. What does your package.json look like?

@benoitdion
Repo: https://github.com/servexyz/react-native-expo-storybook-v5
Package: https://github.com/servexyz/react-native-expo-storybook-v5/blob/master/package.json

from react-native.

@benoitdion @shilman Update: Also getting prompted to select Storybook version on yarn remove:

from react-native.

@alechp
Using android I can't get any stories to show on the web. My package.json:

`"scripts": {
"storybook": "start-storybook -p 7007"
},
"dependencies": {
"@expo/samples": "2.1.1",
"core-js": "2",
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta7",
"react-native-super-grid": "^3.0.3",
"react-navigation": "3.0.9"
},

"devDependencies": {
"@emotion/core": "^10.0.10",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addon-storysource": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@storybook/react-native": "^5.0.11",
"@storybook/react-native-server": "5.1.0-alpha.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-expo": "^5.0.0",
"babel-runtime": "^6.26.0",
"emotion-theming": "^10.0.10",
"jest-expo": "^32.0.0",
"prop-types": "^15.7.2",
"react-dom": "16.5.0"
},`

I used your workaround and got it to work on the android emulator from Android SDK and there the stories are shown but not on Web. I also get into this loop where I need to select the version every time I run yarn. I installed alpha 40. So far the states I have achieved are either infinite loading or no stories on the web.

from react-native.

@alechp @TheWeeezel did you try syncing all storybook related deps to the same version?

from react-native.

@alechp @TheWeeezel did you try syncing all storybook related deps to the same version?

Sorry for my late answer. Yes i did. I figured i wait for Expo 33 to release. I tried so many versions but gave up.

from react-native.

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

from react-native.

@TheWeeezel I'm having similar issues

Android emu

iOS sim

My hunch is that this has to do with the Android emu and not Storybook (or Expo). Admittedly getting this working on Android isn't top priority for me rn. Have you had any luck getting passed this on your end?

from react-native.

@Gongreg I agree re: issue being too big. More generic support thread than actual issue at this point. Worth closing IMO

from react-native.

Any news about this issue ? With expo 34 and Storybook 5 Story are loading forever on the left panel.

from react-native.