react-native

react-native copied to clipboard

Describe the bug

I cannot find addon tab in @storybook/react-native-server v5.3.3.

I have been using addons well like addon-knobs in v5.3.0-alpha.45 as below.

"@storybook/react-native-server": "v5.3.0-alpha.45",

    "@storybook/addon-actions": "5.3.3",
    "@storybook/addon-knobs": "5.3.3",
    "@storybook/addon-links": "5.3.3",
    "@storybook/addon-ondevice-actions": "5.3.3",
    "@storybook/addon-ondevice-knobs": "5.3.3",
    "@storybook/addons": "5.3.3",
    "@storybook/react-native": "5.3.3",
    "@storybook/react-native-server": "v5.3.0-alpha.45",

"@storybook/react-native-server": "5.3.3"

There is no addons tab

    "@storybook/addon-actions": "5.3.3",
    "@storybook/addon-knobs": "5.3.3",
    "@storybook/addon-links": "5.3.3",
    "@storybook/addon-ondevice-actions": "5.3.3",
    "@storybook/addon-ondevice-knobs": "5.3.3",
    "@storybook/addons": "5.3.3",
    "@storybook/react-native": "5.3.3",
    "@storybook/react-native-server": "5.3.3",

storybook/addons.js

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

To Reproduce Steps to reproduce the behavior:

1. Run storybook server: yarn storybook
2. Reload simulator running react native
3. Check web browser showing storybook
4. Find addon tab

Expected behavior

Can use Addon tab

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 72.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: 5.3.3 => 5.3.3 
    @storybook/addon-knobs: 5.3.3 => 5.3.3 
    @storybook/addon-links: 5.3.3 => 5.3.3 
    @storybook/addon-ondevice-actions: 5.3.3 => 5.3.3 
    @storybook/addon-ondevice-knobs: 5.3.3 => 5.3.3 
    @storybook/addons: 5.3.3 => 5.3.3 
    @storybook/react-native: 5.3.3 => 5.3.3 
    @storybook/react-native-server: 5.3.3 => 5.3.3 

@JeffGuKang Just had a similar issue with the web-components app. See if pressing A or D brings the panel back.

I have the same issue, and pressing A or D doesnt help.

Having the same issue, not able to see addons tab (only after updating to v5.3.x) on browser but addons tab is available on-device.

Quick-fix: Downgrading the version to 5.2.8 worked for me.

Having the same issue, not able to see addons tab (only after updating to v5.3.x) on browser but addons tab is available on-device.

Quick-fix: Downgrading the version to 5.2.8 worked for me.

It works also v5.3.0-alpha.45 version as my stortbook packages info.

I have the same issue, and pressing A or D doesnt help.

Same issue for me on 5.3.9

Same issue for me on 5.3.12

Hey, I've looked into this one. I've found why it is happening and now I am trying to find the root cause of it.

Info:

I found out that addons.js file is loaded only after provider.handleAPI() (which calls addons.loadAddons()) is called. I will continue looking into it after I get some updates from other maintainers.

@Gongreg Any updates? Seems you almost got the fix :)

Same issue for me on 5.3.12

Hey, sorry. Got quite demotivated to work on the Storybook for React Native since there isn't a lot of activity happening here.

I hope to get back at it, would be really happy to see some people contributing to the project.

I will try to help with what I can

Same issue for me on 5.3.18

None of the panel are showing - knobs, actions.

Running react-native w/ Storybook version 5.3.18

Having the same issue, not able to see addons tab (only after updating to v5.3.x) on browser but addons tab is available on-device.

Quick-fix: Downgrading the version to 5.2.8 worked for me.

@prabhjodhOYO Could you tell me how to downgrade? I have tried the following and they didn't work:

1. Cleared node_modules and then changed version numbers to 5.2.8
2. Tried to install version 5.2.8 using @storybook/cli - it doesn't look like the cli has that option

Thanks.

@kiranjd

Just change the @storybook/react-native-server to v5.3.0-alpha.45 as mine

In the meantime, I share with you this patch to fix the bug and make add-on tab reappear :

diff --git a/node_modules/@storybook/react-native-server/dist/client/manager/index.js b/node_modules/@storybook/react-native-server/dist/client/manager/index.js
index 0cff143..3e76987 100644
--- a/node_modules/@storybook/react-native-server/dist/client/manager/index.js
+++ b/node_modules/@storybook/react-native-server/dist/client/manager/index.js
@@ -11,7 +11,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* global storybookOptions */
 var rootEl = _global.document.getElementById('root');
 
+setTimeout(() => {
 (0, _ui["default"])(rootEl, new _provider["default"]({
   url: _global.location.host,
   options: storybookOptions
 }));
+}, 0);

Steps to apply the patch :

• add "postinstall": "patch-package" in scripts section of your package.json :
• create the file patches/@storybook+react-native-server+5.3.18.patch with content above
• run yarn add --dev patch-package

Cheers @fabien88 , just curious if @storybook/addon-ondevice-notes works an intended for you guys.

I'm looking into

• getting our NOTES tab displaying in the browser
• updating the in the simulator/emulator once updated via the browser

Illustration: https://share.getcloudapp.com/5zu1olrq

Cheers @fabien88 , just curious if @storybook/addon-ondevice-notes works an intended for you guys.

I'm looking into

• getting our NOTES tab displaying in the browser
• updating the in the simulator/emulator once updated via the browser

Illustration: https://share.getcloudapp.com/5zu1olrq

You're missing import '@storybook/addon-notes/register'; inside addons.js (you also need to install it if not already).

Notes tab display on the top :

Agh how'd I miss that, cheers again @fabien88.

I've come across https://github.com/storybookjs/react-native/issues/4, looking into that.

Still have the browser/simulator out of sync, I'll raise as separate issue since we're not aware and look into that too.

(Illustration: https://share.getcloudapp.com/z8uxRej8)

This issue is fixed in later versions of storybook/core see https://github.com/storybookjs/storybook/pull/10468 looking into the possibility of getting this fix for 5.3.x

Storybook 5.3.20 was released with a fix for this and once #100 gets merged this issue will be fixed. Alpha release will follow in order to confirm everything is working as expected.

I released an alpha version with this fix install @storybook/react-native-server: 5.3.21-alpha.0 to try it out

I still have this issue with @storybook/react-native-server@npm:5.3.23

@Levino make sure you have addons properly configured. For the server addons they must be in the storybook folder in the addons.js file.

Thanks @dannyhw! Following your comment I fixed my issue with an additional file storybook/addons.ts with this content:

import '@storybook/addon-actions/register'

I do not import this file in my apps code. It is just lying there for storybook server to pick it up. Also note that I do not import @storybook/addon-ondevice-actions/register but the non-native addon.

I am also experiencing this issue with "@storybook/react-native-server": "^5.3.23"

Installed storybook via Storybook's RN tutorial script npx -p @storybook/cli sb init --type react_native

// storybook/rn-addons.js
import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';

// storybook/addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';

@dannyhw or others, this is the default config from the script. Are these config files correct. Thank you!

@ghsupear looks ok to me, just make sure you fix all your versions to ^5.3 since there can be incompatibilities with version 6+ especially in 6.4.

@dannyhw by default, this is what the script added to my devDependencies.

    "@storybook/addon-actions": "^5.3",
    "@storybook/addon-knobs": "^5.3",
    "@storybook/addon-links": "^5.3",
    "@storybook/addon-ondevice-actions": "^5.3.23",
    "@storybook/addon-ondevice-knobs": "^5.3.25",
    "@storybook/react-native": "^5.3.25",
    "@storybook/react-native-server": "^5.3.23",

I updated this to the following without success

    "@storybook/addon-actions": "^5.3",
    "@storybook/addon-knobs": "^5.3",
    "@storybook/addon-links": "^5.3",
    "@storybook/addon-ondevice-actions": "^5.3",
    "@storybook/addon-ondevice-knobs": "^5.3",
    "@storybook/react-native": "^5.3",
    "@storybook/react-native-server": "^5.3",

Is there anything else I should be aware of?

@ghsupear seems fine, and do you have stories that use knobs or actions? The add-ons will only appear when they are used.

also make sure that you have .addDecorator(withKnobs) either globally or in the story that uses it.