`@storybook/addon-actions` & `@storybook/addon-ondevice-actions` are not working about react-native HOT 24 CLOSED

I ran into this error while using the default React Native stories.

This probably isn't exactly the same problem that this issue is discussing, but I want to mention it in case it helps.

For me the problem was that when these default stories import their index.js file, they do so like this:

import Welcome from '.';

This results in an error, but I was able to prevent the error by actually including the index file name in the import:

import Welcome from './index';

I'm not sure if this is just a result of my specific environment or if it is a bug in the Storybook default examples. I am using Typescript, so maybe that is part of the problem. (isn't it always 😏)

from react-native.

I just started using storybook and noticed us react-native folks are still on 5.3 whereas the rest of the storybook ecosystem is on 6.3!

For anyone still experiencing this error on 5.3 with react native, looking at the error experienced closer it says:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method isPropagationStopped on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.

Using @alechp 's example which is from the storybook react-native 'Hello World':

storiesOf("Button", module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add("with text", () => (
    <Button onPress={action("clicked-text")}>
      <Text>Hello Button</Text>
    </Button>
  ))

To get rid of the nuisance error we can just replace

onPress={action("clicked-text")}

with

onPress={(e)=>{ e.persist(); action('clicked-text')(e)}}

Ultimately we're just calling event.persist() before calling the handler generated by action. Once this is done, e everything else seems to work the same (that is the action feeds through to the react-native-server), without the nuisance error!

from react-native.

Hey, @alechp. Regarding story selection issues there is this issue: storybookjs/storybook#4716 .

Regarding storysource addons there is no @storybook/addon-ondevice-storysource addon. Also @storybook/addon-storysource doesn't work in React Native since it uses webpack to do its magic.

Regarding @storybook/addon-actions there seems to be a bug.
@shilman I am not sure we need to separate issues when the bug seems to be the same on.

Also sorry for not replying for so long, didn't see this issue.

from react-native.

@mashaalmemon
Great. Thank you. This bug is still not solved.

For google search:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StoryView`.

from react-native.

@alechp, regarding actions I think it is a separate issue. Didnt have time to check it. But I think the bug is inside actions addon itself.

from react-native.

No, sorry.

from react-native.

Hi, its working for me, I've installed both addon-ondevice-actions and actions but I've registered only addon-ondevice-actions, but I import addon-actions in the stories!

from react-native.

does anyone still have this issue? if so it would be good if it could be reproduced in a branch using the example app. Try the reproduction steps in the contributing doc or make an expo snack based on the one in the readme.

from react-native.

Not sure whether this is related or not, but storysource also fails to load. I recall that in a past version storysource was working fine. Unfortunately, didn't document which version it was working on (although I have a strong suspicion it was @storybook/[email protected])

@storybook/addon-ondevice-storysource & @storybook/addon-storysource both fail

Note: the config for this is identical to the config above

from react-native.

Update: This issue persists in 5.1.0-rc.4

Screenshots

Story source loads indefinitely

Story actions throws synthetic event issue

Deps

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "npm-run-all --parallel expo storybook",
    "expo": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "@emotion/native": "^10.0.11",
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-router": "^5.0.0"
  },
  "devDependencies": {
    "@emotion/core": "^10.0.10",
    "@storybook/addon-actions": "^5.1.0-rc.4",
    "@storybook/addon-links": "^5.1.0-rc.4",
    "@storybook/addon-storysource": "^5.1.0-rc.4",
    "@storybook/addons": "^5.0.11",
    "@storybook/react-native": "^5.1.0-rc.4",
    "@storybook/react-native-server": "5.1.0-rc.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-expo": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "emotion-theming": "^10.0.10",
    "npm-run-all": "^4.1.5",
    "prop-types": "^15.7.2",
    "react-dom": "16.5.0",
    "storybook-react-router": "^1.0.5"
  },
  "private": true
}

from react-native.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

from react-native.

Update: unable to test in 5.1.9 because of storybookjs/storybook#7017 (comment)

from react-native.

Re: storysource - thanks for the heads up

Re: response time - all good. Thanks for taking the time to check it out!

Re: actions - is this bug separate from storybookjs/storybook#4716 ?

from react-native.

Hi im getting the same warning any updates on this?

from react-native.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

from react-native.

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

from react-native.

I think this is still an active issue (at least on latest version). Can we reopen it?

from react-native.

I'm still seeing this issue, action("clicked-text") continues to not cause the action logger to appear, whilst the Addons tab continued to show "No adding loaded". Warning appears as per original documentation. I've attempted the import of addon-ondevice-actionsto no avail.

from react-native.

Thank you @cloud-walker. I've been trying to figure this one out for too long now. Honestly I'm really just struggling to find good docs for Storybook's setup pertaining to RN. There's what looks like an official tutorial, but they contradict the setup instructions on the actual package. Does anyone know what setup instructions are up to date? If you do could you share the link?

from react-native.

@WarrenBuffering currently I'm working with the tutorial maintainer to improve it but honestly the tutorial doesn't work for me and that's why I've given my own version of the getting starting guide here on the repo (still a work in progress).

There is also an issue with the cli init command for react native, I've already fixed in the alpha version (@next) so hopefully that will get released soon. It will get released with 6.1 of storybook since the cli is linked with the main storybook repo.

from react-native.

also in regards to this specific issue it's related to storybook server and I'm thinking it's probably fixed in v6 of storybook so when I'm able to make a v6 for react native that would hopefully resolve this issue. If I can find the root cause I will try to get a patch for 5.3 though.

Just a side note:
From my experience this error doesn't actually cause anything to fail it's just a nuisance. In fact you can see that it's a warning not a full on error.

from react-native.

@traviswimer Thanks for your answer, it solved the problem I was facing! (Expo project with TypeScript)

from react-native.

@traviswimer you're my hero

from react-native.

this seems like an old issue so I'm closing as part of a cleanup, let me know if it needs to be reopened.

from react-native.