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.

#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

[jvliwanag]

I recall having ran into this with a nativewind project. Nativewind 4 uses a babel transform within the react-native-css-interop that wraps some rn components so that it may support css properties. React elements coming from those however had cyclic issues that made storybook hang when serializing them.

Though not an ideal solution, I just transitioned to twrnc instead of nativewind.