Passing a Component as Prop

[ShaneKeney]

Describe the bug Passing a component as a prop causes the app to become unresponsive. See example below. I commented out the prop that has a component passed in and it worked fine.

To Reproduce

import { View } from 'react-native';
import ProductCard from '.';
import { Meta, StoryObj } from '@storybook/react';

export default {
  title: 'Components/Molecules/ProductCard',
  component: ProductCard,
  decorators: [
    (Story: React.FC) => (
      <View className="p-4 py-11">
        <Story />
      </View>
    )
  ]
} satisfies Meta<typeof ProductCard>;

export const Default: StoryObj<typeof ProductCard> = {
  args: {
    product: oneVariantProduct(),
    image: <ProductCard.Image />. // <== Storybook doesn't like this
  }
};

ProductCard implementation for reference:

const ProductCard = ({ cardStyle = {}, image, info, badge, action, product }: Props) => {
  const onCardPress = () => {
    // TODO:
  };

  return (
    <ProductCardContext.Provider value={{ product }}>
      <TouchableOpacity
        onPress={onCardPress}
        className="h-[232px] w-[160px] border border-Neutral-Grey-30 bg-Neutral-Grey-0"
      >
        {image}
        {info}
        {badge}
        {action}
      </TouchableOpacity>
    </ProductCardContext.Provider>
  );
};

Expected behavior I would expect to be able to pass a component as a prop into the Storybook story created for that specific component UI representation the same way I can pass it into the component normally.

Code snippets See above.

System:

Storybook Environment Info:

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm <----- active
    pnpm: 7.26.3 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.62
    Safari: 17.0
  npmPackages:
    @storybook/addon-actions: ^7.6.16 => 7.6.19 
    @storybook/addon-controls: ^7.6.16 => 7.6.19 
    @storybook/addon-ondevice-actions: ^7.6.15 => 7.6.19 
    @storybook/addon-ondevice-backgrounds: ^7.6.15 => 7.6.19 
    @storybook/addon-ondevice-controls: ^7.6.15 => 7.6.19 
    @storybook/react-native: ^7.6.15 => 7.6.19 

Additional context Is there a better or alternative way to approach mocking out this type of component using Storybook?

[dannyhw]

Generally this shouldn't be an issue but another person using nativewind 4 mentioned a similar thing.

https://github.com/storybookjs/react-native/issues/576

One way you can get around it is by using a mapping

Though i wasn't able to reproduce this so it would be great if you could provide a minimal reproduction of the issue.

[dannyhw]

Heres an example nativewind 4 project where i tried to reproduce this issue but wasn't able to

https://github.com/dannyhw/RNSBReproAttempt