object addon in @storybook/react-native is not working if results of object function are placed in a variable first

[joshglenn]

Describe the bug Object addon cannot be created using variable created with object(), only by direct function

To Reproduce Try to create an addon like this:

let styleVar = object('CVStyle', {backgroundColor: 'red'}, 'GROUP-ID1');

storiesOf('ActionsScreen', module)
  .addDecorator(withKnobs)
  .add('default view', () => (
   <CenteredView style={styleVar}>
    <AppWithControllerim>
      <ActionsScreen actions={testActions} >
      </ActionsScreen>
      <Button onPress={action('clicked-a-button')}>Click Me</Button>
    </AppWithControllerim>
   </CenteredView>
  )
);

^ doesn't work. The knobs tab simply shows: NO KNOBS.

But this does work:

storiesOf('ActionsScreen', module)
  .addDecorator(withKnobs)
  .add('default view', () => (
   <CenteredView style={object('CVStyle', {backgroundColor: 'red'}, 'GROUP-ID1')}>
    <AppWithControllerim>
      <ActionsScreen actions={testActions} >
      </ActionsScreen>
      <Button onPress={action('clicked-a-button')}>Click Me</Button>
    </AppWithControllerim>
   </CenteredView>
  )
);

Expected behavior Both cases should work the same.

Screenshots If applicable, add screenshots to help explain your problem.

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

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.19.0 - /usr/local/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 69.0
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-knobs: ^5.3.18 => 5.3.18 
    @storybook/addon-notes: ^5.3.18 => 5.3.18 
    @storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-ondevice-knobs: ^5.3.18 => 5.3.18 
    @storybook/addon-ondevice-notes: ^5.3.18 => 5.3.18 
    @storybook/react-native: 5.3.18 => 5.3.18 
    @storybook/react-native-server: ^5.3.18 => 5.3.18 
  npmGlobalPackages:
    @storybook/cli: 5.2.8

[penumbra1]

Looks like the same goes for the select addon.

Environment Info:

System: OS: macOS 10.15.5 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Binaries: Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.2/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm Browsers: Chrome: 83.0.4103.61 Safari: 13.1.1 npmPackages: @storybook/addon-knobs: ^5.3.18 => 5.3.18 @storybook/addon-notes: ^5.3.19 => 5.3.19 @storybook/addon-ondevice-knobs: ^5.3.19 => 5.3.19 @storybook/addon-ondevice-notes: ^5.3.19 => 5.3.19 @storybook/addons: ^5.3.9 => 5.3.18 @storybook/react-native: ^5.3.9 => 5.3.18 @storybook/react-native-server: ^5.3.9 => 5.3.18

[dannyhw]

Not sure that this is a bug, this behaviour makes sense because the knob should be part of the react lifecycle otherwise it wouldn't update on re-render. Does it work when you do something like this on the web version? Maybe if you made styleVar a function it would work styleVar = () => object('CVStyle', {backgroundColor: 'red'}, 'GROUP-ID1')