[iOS] Old knobs linger after navigating to a new story

[kevindice]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Run storybook on iOS. Note, we don't see this behavior in Android, only iOS.
2. Visit first story, go to the knobs tab, and see that the expected knobs are present (Screenshot 1)
3. Visit 2nd story, go to the knobs tab, and see that the expected knobs are present but displayed under the knobs for the first story, which is no longer selected. (Screenshot 2)

Expected behavior

Only the knobs for the 2nd story are visible. (Screenshot 3)

Screenshots

Screenshot 1 - Knobs for the first story are displayed

Screenshot 2 - Knobs for the 2nd story are displayed, but the knobs for the first story linger

Screenshot 3 - Expected behavior: Only 2nd story knobs are displayed

Code snippets

-

System: Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 3.6.0 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Safari: 16.1
  npmPackages:
    @storybook/addon-actions: 6.5.16 => 6.5.16 
    @storybook/addon-controls: 6.5.16 => 6.5.16 
    @storybook/addon-knobs: 6.4.0 => 6.4.0 
    @storybook/addon-links: 6.5.16 => 6.5.16 
    @storybook/addon-ondevice-actions: 6.5.3 => 6.5.3 
    @storybook/addon-ondevice-controls: 6.5.3 => 6.5.3 
    @storybook/addon-ondevice-knobs: 6.5.3 => 6.5.3 
    @storybook/react-native: 6.5.3 => 6.5.3 
    @storybook/react-native-server: 6.5.3 => 6.5.3 

Additional context

We started seeing this after an upgrade from Storybook 5.

[dannyhw]

What do your stories look like? Usually this can happen if your knobs are created outside the context of the story i.e they run when importing the file. You want to have them only be created in the render.

[kevindice]

I don't think we have any of that going on. It happens consistently on iOS only for every story.

Story for 1st component:

import { text } from '@storybook/addon-knobs';
import { View } from 'native-base';

import { Alert } from './index';

export default {
  title: 'Alert',
};

export const Error = () => {
  return (
    <View m={4}>
      <Alert
        status="error"
        text={text('Text Content', 'Error retrieving data, pull to refresh.')}
      />
    </View>
  );
};

And Story for 2nd component:

import { number } from '@storybook/addon-knobs';
import { View } from 'native-base';

import { Heading } from '@my-company-here-asdf/design-system/typography';

import { NumberBadge } from './index';

export default {
  title: 'NumberBadge',
};

export const Default = () => {
  return (
    <View alignItems="center">
      <NumberBadge count={number('Notification count', 1)} />
    </View>
  );
};

export const InboxHeader = () => {
  return (
    <View
      paddingTop={5}
      flexDir="row"
      alignItems="center"
      justifyContent="center"
      alignContent="center"
    >
      <Heading lineHeight="30px" size="md" mr={2}>
        Inbox
      </Heading>
      <NumberBadge count={number('Notification count', 1)} />
    </View>
  );
};

[dannyhw]

@kevindice ok I see well it looks like you are using csf but knobs aren't compatible with CSF you should be using controls and args instead when using CSF.

Knobs require the storiesOf syntax and both are deprecated for v6.5

[kevindice]

Ah my mistake. We'll migrate. Thank you for taking a look.