grabcode / react-native-web-starter

Starter for a React Native for Web project (RN4Web)
Other
228 stars 36 forks source link

actions do not work in starter storybook #20

Open thurt opened 7 years ago

thurt commented 7 years ago

Given code in src/stories/Touchable.js:

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

import { Text } from 'react-native';
import { Touchable } from '../components/Touchable';

storiesOf('Touchable', module)
.add('with Text', () => (
  <Touchable onPress={ action("Can't touch this?") }>
    <Text style={{ color: '#FFF' }}>SUBMIT</Text>
  </Touchable>
))
.add('with no children', () => (
  <Touchable />
));

I do not see any action being reported when clicking the button in the storybook client's "action logger" pane.

RecordIt video of bug: http://recordit.co/bKuLASDBcQ

matart15 commented 7 years ago

@thurt It seems like action does not work if it is wrapper inside function.

This works.

<Touchable
      onActionsPress={action('Action 2 clicked')}
    />

This does not work

<Touchable
      onActionsPress={() => {action('Action 2 clicked')}}
    />

Because in here storybook action creates new function. https://github.com/storybooks/storybook/blob/master/addons/actions/src/preview.js#L35

so your action function must be called on int. not on click. This may work

<Touchable
      onActionsPress={() => { return action('Action 2 clicked')}.call()}
    />