Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passing a Component as Prop #583

Open
ShaneKeney opened this issue Jun 19, 2024 · 4 comments
Open

Passing a Component as Prop #583

ShaneKeney opened this issue Jun 19, 2024 · 4 comments

Comments

@ShaneKeney
Copy link

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
Copy link
Member

dannyhw commented Jun 19, 2024

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
Copy link
Member

dannyhw commented Jun 19, 2024

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

https://github.com/dannyhw/RNSBReproAttempt

@jvliwanag
Copy link

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.

@ditorahard
Copy link

ditorahard commented Oct 8, 2024

Just now I got this issue with tamagui starter repo using expo with react native and run storybook in it. The story made storybook hangs at splash screen after compiling.

Same issue and behavior as : #576 (comment) the component works when hot reloading, but error when restarting the server

Image
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants