Storybook: Options addon must be configured *after* the preview has rendered in React Native

[tmeasday]

As the addon channel is not created until render time in React Native (see https://github.com/storybooks/storybook/issues/1191), we cannot call setOptions until after that has happened. In practice, this currently means in a setTimeout block:

const StorybookUI = getStorybookUI({ ... });
setTimeout(() => setOptions({ ... }), 1000);

Reproduction

https://github.com/storybooks/storybook/issues/815#issuecomment-305822940

[slorber]

Hi,

I'm not using RN but i got the error pointing to this issue after upgrading, is it normal?

[tmeasday]

@slorber -- sorry i missed this. I think this error can sometimes happen if your node_modules gets messed up and you have two versions of @storybook/addons, too.

[tmeasday]

We should see if https://github.com/storybooks/storybook/pull/2711 can be used to resolve this.

[slorber]

Will check next time I work on my storybook, haven't updated it for a while

[FredyC]

@tmeasday So is there some viable solution/workaround as of now? The #2711 has been merged, but I am not sure how that can be used actually.

[tmeasday]

@FredyC -- the workaround of calling from a timeout should still work.

I believe it turned out #2711 was an event from the manager side when the channel was created -- a similar change would be needed on the preview side to solve this issue (if I remember right). If someone is game to give it a go, it would be great! I think most of the core team doesn't use RN and is a little afraid to touch it, unfortunately.

[FredyC]

Actually, I just updated all packages yesterday and suddenly it seems to be working without any change. I guess some other change might have fixed it?

"@storybook/addon-actions": "^3.3.15",
"@storybook/addon-links": "^3.3.15",
"@storybook/react-native": "^3.3.15",

[danielduan]

can we verify that this has been fixed and close this ticket? @FredyC @tmeasday?

[FredyC]

Well, it seems more like a random issue. Even with those updated packages, I have seen that error time to time so I ended up with the timeout workaround which seems to be working so far, but it would be nice to have a proper solution for that.

[Gongreg]

@FredyC, hey. You are correct that this is a random issue. And the fix shouldn't be difficult. I would like to say that we can add the event to fix this issue (I would personally do it), but I have already failed multiple times to finish the functionality I am currently working on. If nobody will take this issue I will fix it, but I can't guarantee when I will do it. Sorry for that.

[tmeasday]

@danielduan as far as I know this remains an issue. I have not quite been brave enough to touch RN (which i don't use personally day-to-day) to try and resolve it, but I suspect it wouldn't be very hard to fix.

[xeroxoid]

Any news on this? Keep randomly getting it all day long today.

[Gongreg]

Hey, sorry for no bringing up no information, this issue was buried deep.

3903 will solve this issue.

The channel will be created as soon as you call getStorybookUI instead of in middle of react render.

So you will be able to call:

const UI = getStorybookUI({...});

setOptions({...})

and you won't have to use any timeouts.

[Gongreg]

The #3903 was merged into the master. In Storybook v4 this issue is solved.