React-native: Button.onPress parameter not documented

[dpkirchner]

Description

The onPress documentation for Button does not explain what argument(s) may be passed.

I visited https://facebook.github.io/react-native/docs/button.html .
I expected to find documentation describing the argument passed to onPress.
The documentation seems to suggest that no arguments are passed () => any.

Reproduction Steps

Do the stuff in the description.

Sample Code

N/A

Solution

The documentation would be updated to show the parameter that is passed to the onPress callback. Ideally, it'd link to the documentation of that parameter.

Additional Information

• React Native version: v0.46.0-rc.2 (current master)
• Platform: N/A
• Development Operating System: N/A
• Build tools: N/A

[hramos]

It's just a function that is called when the button is pressed. The component does not place any requirements on what sort of function you use or what parameters you pass to it.

[dpkirchner]

I may not have been clear. A parameter is already being passed, when you specify something like onPress={this.method}, but its type and structure are not documented anywhere (that I have found, certainly not on that Button.html page or in its source).

To be more clear, I'm not talking about adding my own parameters.

[hramos]

The docs are generated from the source code. This is effectively calling http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#onpress, and from what I can see the only parameter passed is an Event https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableWithoutFeedback.js#L119

[McPo]

So should the Event not then be documented. I believe that is what @dpkirchner is getting at. As It did not appear to me that onPress was called with any parameters, where as it is apparently being called with an Event object. The next question is what is within the Event object.

Im interested in this, to see if theres a way for me to get an attribute from the button element that was pressed.

Or am I missing something?

---

For those who are curious, I was able to obtain the props of the button that was pressed via

export const getPropsFromEvent = event => (event._targetInst._currentElement.props.children[0] || event._targetInst._currentElement.props.children)._owner._currentElement.props;

This does not appear to be officially supported, so beware that it could change at anytime. To print out the structure of the event object you can use the following.

onPress={ e => {
    seen = [];

  console.error(JSON.stringify(e,(key, val) => {
           if (val != null && typeof val == "object") {
                if (seen.indexOf(val) >= 0) {
                    return;
                }
                seen.push(val);
            }
            return val;
        }));
    }

What is the likelihood that the ability to access the props of the item that was pressed would be accepted as an official feature in react-native. In ReactJS, I tend to use the data attributes in order to pass parameters to onClick functions without having to bind them. Something like:

<Button data-id={ item.id } onClick={ props.onClick }>
...
props.onClick = event = > { console.log(parseInt(event.target.dataset.id))); }

Obviously I cant use data attributes in react-native, but something of a similar ilk would be nice. Should I create a separate issue for this?

[kvrmd]

@McPo
What about this?

import { Button as RNButton } from 'react-native'
export class Button extends React.PureComponent {
  static defaultProps = {
    onPress: () => {}
  }
  static propTypes = {
    data: PropTypes.any,
    onPress: PropTypes.func
  }
  onPress = () => {
    this.props.onPress(this.props.data)
  }
  render () {
    const { data, onPress, ...otherProps } = this.props
    return <RNButton {...otherProps} onPress={this.onPress} />
  }
}

You can then use it like this:

<Button data={item.id} onPress={props.onClick} />