Storybook: React-native: "Addon" view always opened at start

[bitkris-dev]

Each time I refresh the app, I find the "Addon" tab opened and I've to switch tabs every single time. I'm on an iOS emulator, running a simple React Native app initialized with "react-native init" (v0.61.1).
(please note: I don't use Expo).

As you can see in the screenshot, my storybook page is behind the "Addons" pane (with some knobs, but the issue happens regardless of their existence). Which even shows up in the left side, while normally it's in the right one.
It's also visible that in the UI tab selector the current view should be in "PREVIEW".

This is my storybook index:
```import {AppRegistry} from 'react-native';
import {getStorybookUI, configure} from '@storybook/react-native';

import './rn-addons';

configure(() => {
require('./stories');
}, module);

const StorybookUIRoot = getStorybookUI();
AppRegistry.registerComponent('myapp', () => StorybookUIRoot);

export default StorybookUIRoot;
```

Did I do something wrong with my code or is it a bug? Couldn't find anything searching the issue.

[jpaas]

I've been having the same issue since I moved up to React Native 0.60.x

[jpaas]

It also stopped connecting to the storybook server, so these two issues together have made it not a lot of fun to use lately

[wkoutre]

Same issue with RN >= 0.60

[wkoutre]

As a workaround, if you're okay with exclusively using the browser GUI (rather than onDeviceUI), you can set it up like:

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: false,
  ...otherOptions
});

[bitkris-dev]

As a workaround, if you're okay with exclusively using the browser GUI (rather than onDeviceUI), you can set it up like:

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: false,
  ...otherOptions
});

Many thanks, it indeed solves the UI problem, but I don't have anymore a way to open the Addons or Navigator tabs (which I need). What is the browser GUI?

[wkoutre]

@bitkris-dev

My config is:

const StorybookUIRoot = getStorybookUI({
  port: 7007,
  host: "localhost",
  onDeviceUI: false,
  resetStorybook: true,
  shouldPersistSelection: true,
});

So, with the storybook server running, browser GUI can be found at http://localhost:7007/.

[bitkris-dev]

@bitkris-dev

My config is:

const StorybookUIRoot = getStorybookUI({
  port: 7007,
  host: "localhost",
  onDeviceUI: false,
  resetStorybook: true,
  shouldPersistSelection: true,
});

So, with the storybook server running, browser GUI can be found at http://localhost:7007/.

Many thanks, it seems a good compromise for now. Unfortunately addons are not visible from the browser GUI in react-native, so I have to switch "onDeviceUI" to true sometimes or edit the values manually, which is not optimal.
I hope they will take in consideration this annoyance!

[wkoutre]

Unfortunately addons are not visible from the browser GUI in react-native

Some are, some aren't. Nonetheless, I agree with you! Hopefully, it's addressed soon.

[JeffGuKang]

Same issue with RN >= 0.60

I do not have this issue in my project using RN 0.60.5
But it happens 0.61.2 in another project.

[JeffGuKang]

As a workaround, if you're okay with exclusively using the browser GUI (rather than onDeviceUI), you can set it up like:

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: false,
  ...otherOptions
});

onDeviceUI: false causes a another issue with Action addon as below.

TypeError: JSON.stringify cannot serialize cyclic structures.

[matapo]

As a workaround, if you're okay with exclusively using the browser GUI (rather than onDeviceUI), you can set it up like:

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: false,
  ...otherOptions
});

onDeviceUI: false causes a another issue with Action addon as below.

TypeError: JSON.stringify cannot serialize cyclic structures.

I am facing this issue as well...

[JeffGuKang]

As a workaround, if you're okay with exclusively using the browser GUI (rather than onDeviceUI), you can set it up like:

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: false,
  ...otherOptions
});

onDeviceUI: false causes a another issue with Action addon as below.

TypeError: JSON.stringify cannot serialize cyclic structures.

I am facing this issue as well...

I made the issue #8441 . You may share more information on the thread.

[Gongreg]

Hey everyone,
I've created a PR to fix the issue. Sorry that Storybook for React Native keeps breaking.

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.38 containing PR #8681 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[hyochan]

    "@storybook/addon-actions": "^5.3.0-rc.8",
    "@storybook/addon-knobs": "^5.3.0-rc.8",
    "@storybook/addon-links": "^5.3.0-rc.8",
    "@storybook/addon-notes": "^5.3.0-rc.8",
    "@storybook/addons": "^5.3.0-rc.8",
    "@storybook/react-native": "^5.3.0-rc.8",

Confirm above resolves issue.

[Bigood]

For any passing by, same problem here with a bootstrapped app using Ignite Bowser, where 5.1.11 is used with RN 0.61.2.

Moving to the latest stable solves it:

"@storybook/addon-storyshots": "5.3.12",
"@storybook/react-native": "5.3.12",

Thanks for the fix!