[React Native] No Addon tab in @storybook/react-native-server > v5.3.x #24

JeffGuKang · 2020-01-16T05:03:56Z

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:

Run storybook server: yarn storybook
Reload simulator running react native
Check web browser showing storybook
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

The text was updated successfully, but these errors were encountered:

gmlnchv · 2020-01-17T02:09:35Z

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

mi5ha · 2020-01-26T17:41:00Z

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

prabhjodhOYO · 2020-01-27T08:10:08Z

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.

JeffGuKang · 2020-01-27T08:28:38Z

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.

pang0018 · 2020-01-27T23:41:41Z

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

Same issue for me on 5.3.9

ghost · 2020-02-06T10:06:24Z

Same issue for me on 5.3.12

Gongreg · 2020-02-15T19:56:46Z

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.

FRizzonelli · 2020-04-06T17:10:58Z

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

jonathanmachado · 2020-04-06T17:17:10Z

Same issue for me on 5.3.12

Gongreg · 2020-04-06T17:32:44Z

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.

jonathanmachado · 2020-04-06T18:26:19Z

I will try to help with what I can

yosimasu · 2020-04-15T09:03:59Z

Same issue for me on 5.3.18

kiranjd · 2020-04-17T20:16:42Z

None of the panel are showing - knobs, actions.

Running react-native w/ Storybook version 5.3.18

kiranjd · 2020-04-17T20:20:02Z

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:

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

Thanks.

JeffGuKang · 2020-04-18T03:11:21Z

@kiranjd

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

fabien88 · 2020-04-18T19:45:20Z

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

fix issue storybookjs/react-native#24

leotm · 2020-05-17T10:56:02Z

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

fabien88 · 2020-05-17T11:39:38Z

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 :

leotm · 2020-05-17T13:36:02Z

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

I've come across #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)

dannyhw · 2020-08-24T21:42:05Z

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

fix issue storybookjs/react-native#24

dannyhw · 2020-08-26T19:12:13Z

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.

dannyhw · 2020-08-27T21:59:49Z

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

levino · 2022-01-27T10:58:54Z

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

dannyhw · 2022-01-28T17:11:31Z

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

levino · 2022-02-02T15:30:29Z

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.

ghsupear · 2022-02-24T16:32:21Z

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!

dannyhw · 2022-02-24T18:18:47Z

@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.

ghsupear · 2022-02-24T20:20:38Z

@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?

dannyhw · 2022-02-24T21:17:57Z

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

dannyhw · 2022-02-24T21:34:31Z

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

ashishkarki · 2023-01-20T12:32:38Z

@ghsupear I have the same version of react-native-server you mentioned. Did you figure out a solution/fix around this ? thanks.
Following is the content of my package.json around storybook:

"@storybook/addon-knobs": "^5.3.21",
 "@storybook/addon-ondevice-actions": "^5.3.23",
 "@storybook/addon-ondevice-knobs": "^5.3.26",
 "@storybook/addons": "^6.5.15",
 "@storybook/react-native": "^5.3.27",
 "@storybook/react-native-server": "^5.3.23",

ashishkarki · 2023-01-20T12:34:51Z

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

@dannyhw I have stories that use both knobs and actions plus .addDecorator(withKnobs) as well but the knobs just don't show up in the server page. Following are my imports in the storybook\index.js file (i know but i explicitly import the index.js file instead of main.js file and the actions do work for me):

import { addDecorator, storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';

Anything new happening in this space ? appreciated.

dannyhw · 2023-01-20T15:55:28Z

@ashishkarki it might not be related but your version of storybook addons is 6.5, you should downgrade that to be ~5.3 so that you aren't using incompatible versions.

ashishkarki · 2023-01-22T02:05:25Z

Hi @dannyhw , thanks for the response. I tried with two different package versions of the storybook packages but both without success. First being setting all related packages to ^5.3.<variable-path> and the second being setting every version to ^5.3. Example of second settings below.

If it helps my "react": "16.11.0" and "react-native": "0.62.3" packages are like so.

Also, I have cleaned, and re-installed my node_modules and pods every time i update any of my packages.

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

dannyhw · 2023-01-22T13:16:12Z

@ashishkarki do you have the addons file and a rn-addons file? If you can send me a reproduction of the problem I can help more easily.

ashishkarki · 2023-01-23T01:52:06Z

@dannyhw yes, i have those files and following are the contents of those files. I can send either a github link or codesandbox type link in a bit. Meanwhile below i am posting the structure of my storybook setup.

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

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

Also, (1) both the actions and the knobs tabs appear for me (2) but, the actions work for me (3) while the knobs don't like these screenshots:

and, this is the stripped-down version of my storybook\stories\index.js file:

import { addDecorator, storiesOf } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';
import React from 'react';

import { SomeComponentStory } from './components/...........';

const StylesDecorator = story => <View style={{...........}}>{story()}</View>;

// enables knobs for all stories: i have tried to put this globally as well
addDecorator(withKnobs);

storiesOf('ContentTile', module)
  .addDecorator(withKnobs)
  .addDecorator(StylesDecorator)
  .add('Default', () => <SomeComponentStory />);

and, then the SomeComponentStory looks like this:

import { boolean, select } from '@storybook/addon-knobs';
import React from 'react';

import { SomeComponent } from '../.............';

const whatColor = select('color', { GREEN: 'greem', BLUE: 'blue'.... }, GREEN);
const someOtherBoolean = boolean('booly', false);

const SomeComponentStory = () => <SomeComponent variant={whatColor} disabled={someOtherBoolean} />;

export { ButtonStory };

and finally, here is what the folder structure of my storybook folder for RN project looks like:

dannyhw · 2023-01-23T12:40:21Z

@ashishkarki The problem is your knobs are created outside the component. If you put it like this it might work.

<SomeComponent variant={select('color', { GREEN: 'greem', BLUE: 'blue'.... }, GREEN)} disabled={boolean('booly', false)} />;

However you should call storiesOf in the SomeComponentStory file not in the index

like this:

SomeComponentStory

import { boolean, select } from '@storybook/addon-knobs';
import React from 'react';

import { SomeComponent } from '../.............';

storiesOf('ContentTile', module)
  .addDecorator(withKnobs)
  .addDecorator(StylesDecorator)
  .add('Default', () => <SomeComponentStory variant={select('color', { GREEN: 'greem', BLUE: 'blue'.... }, GREEN)} disabled={boolean('booly', false)}   />);

JeffGuKang changed the title ~~[React Native] No Addon tab in @storybook/react-native-server v5.3.3~~ [React Native] No Addon tab in @storybook/react-native-server v5.3.x Jan 16, 2020

shilman transferred this issue from storybookjs/storybook Feb 2, 2020

Gongreg added app: react-native-server bug Something isn't working labels Feb 5, 2020

Gongreg added high priority in progress labels Feb 15, 2020

JeffGuKang mentioned this issue Feb 22, 2020

Downgrade storybook server; Bump other storybook packages hyochan/dooboo-ui-legacy#155

Closed

5 tasks

FRizzonelli mentioned this issue Apr 7, 2020

[Question] Actions payload in web addons hyochan/dooboo-ui-legacy#188

Closed

shaundon mentioned this issue Apr 8, 2020

[BPK-3800] Upgrade most Storybook dependencies Skyscanner/backpack-react-native#478

Merged

fabien88 added a commit to fabien88/storybook that referenced this issue Apr 19, 2020

fix issue storybookjs/react-native#24

4907643

fabien88 added a commit to fabien88/storybook that referenced this issue Apr 19, 2020

fix issue storybookjs/react-native#24

31ad0d1

fabien88 mentioned this issue Apr 19, 2020

fix issue https://github.com/storybookjs/react-native/issues/24 storybookjs/storybook#10468

Merged

ndelangen added a commit to storybookjs/storybook that referenced this issue Apr 20, 2020

Merge pull request #10468 from fabien88/fix-bug-react-native-24

7b7903a

fix issue storybookjs/react-native#24

leotm mentioned this issue May 17, 2020

addon-notes and addon-onedevice-notes out of sync switching between stories #53

Closed

JeffGuKang changed the title ~~[React Native] No Addon tab in @storybook/react-native-server v5.3.x~~ [React Native] No Addon tab in @storybook/react-native-server > v5.3.x Jun 7, 2020

rzdev mentioned this issue Jun 10, 2020

Storysource support for react-native #50

Open

Esxiel mentioned this issue Jun 24, 2020

Native Knobs: Knob menu showing on emulator screen but not in StoryBook web UI #51

Closed

kiranjd mentioned this issue Aug 25, 2020

React Native, Theme Dark, Unreadable text #37

Closed

shilman pushed a commit to storybookjs/storybook that referenced this issue Aug 26, 2020

Merge pull request #10468 from fabien88/fix-bug-react-native-24

1837d9b

fix issue storybookjs/react-native#24

dannyhw mentioned this issue Aug 26, 2020

fix: server addons and update all dependencies to use storybook 5.3.20 #100

Merged

dannyhw closed this as completed Sep 22, 2024

[React Native] No Addon tab in @storybook/react-native-server > v5.3.x #24

[React Native] No Addon tab in @storybook/react-native-server > v5.3.x #24

Comments

JeffGuKang commented Jan 16, 2020

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

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

gmlnchv commented Jan 17, 2020

mi5ha commented Jan 26, 2020

prabhjodhOYO commented Jan 27, 2020 • edited Loading

JeffGuKang commented Jan 27, 2020 • edited Loading

pang0018 commented Jan 27, 2020

ghost commented Feb 6, 2020

Gongreg commented Feb 15, 2020

FRizzonelli commented Apr 6, 2020

jonathanmachado commented Apr 6, 2020

Gongreg commented Apr 6, 2020

jonathanmachado commented Apr 6, 2020

yosimasu commented Apr 15, 2020

kiranjd commented Apr 17, 2020

kiranjd commented Apr 17, 2020

JeffGuKang commented Apr 18, 2020

fabien88 commented Apr 18, 2020 • edited Loading

Steps to apply the patch :

leotm commented May 17, 2020

fabien88 commented May 17, 2020

leotm commented May 17, 2020

dannyhw commented Aug 24, 2020

dannyhw commented Aug 26, 2020

dannyhw commented Aug 27, 2020

levino commented Jan 27, 2022

dannyhw commented Jan 28, 2022

levino commented Feb 2, 2022 • edited Loading

ghsupear commented Feb 24, 2022 • edited Loading

dannyhw commented Feb 24, 2022

ghsupear commented Feb 24, 2022 • edited Loading

dannyhw commented Feb 24, 2022

dannyhw commented Feb 24, 2022

ashishkarki commented Jan 20, 2023

ashishkarki commented Jan 20, 2023

dannyhw commented Jan 20, 2023

ashishkarki commented Jan 22, 2023

dannyhw commented Jan 22, 2023

ashishkarki commented Jan 23, 2023 • edited Loading

dannyhw commented Jan 23, 2023 • edited Loading

prabhjodhOYO commented Jan 27, 2020 •

edited

Loading

JeffGuKang commented Jan 27, 2020 •

edited

Loading

fabien88 commented Apr 18, 2020 •

edited

Loading

levino commented Feb 2, 2022 •

edited

Loading

ghsupear commented Feb 24, 2022 •

edited

Loading

ghsupear commented Feb 24, 2022 •

edited

Loading

ashishkarki commented Jan 23, 2023 •

edited

Loading

dannyhw commented Jan 23, 2023 •

edited

Loading