I have two buttons that both call the same onPress function. In the callback I want to be able to differentiate between which was pressed.
<MKRadioButton title='A' group={this.radioGroup} onPress={this._toggle} /> <MKRadioButton title='B' group={this.radioGroup} onPress={this._toggle} /> then the call
_toggle(event) { //what should go here to figure out if title A or B was called? } One solution is to pass that info as a parameter:
<MKRadioButton title='A' group={this.radioGroup} onPress={(event) => this._toggle(event, 'A')} /> The callback would then use that parameter
_toggle(event, buttonId) { // Use buttonId } EDIT: Another solution is a parent component that always returns the title prop:
class RadioParent extends Component { render() { return ( <MKRadioButton title={this.props.title} group={this.props.radioGroup} onPress={(event) => this.props.onPress(event, this.props.title)} /> ); } } 
MKRadioButton's API isn't an option) that always returns the given title prop as the second parameter in onPress, similar to the code above.To improve performance, you can bind the event handler in the constructor to have it rendered only once
Facebook tip (at the bottom of the page)
We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.
class MKRadioButtonWrapper extends React.PureComponent { constructor(props) { super(props); this.buttonPressed = this.buttonPressed.bind(this); } buttonPressed(){ this.props.onPress(this.props.title); } render() { return ( <MKRadioButton title={this.props.title} group={this.props.group} onPress={buttonPressed} /> ); } } class App extends React.Component { constructor(props) { super(props); this._toggle = this._toggle.bind(this); } _toggle(title) { //do what you want with the title } render() { return ( <View> <MKRadioButtonWrapper title='A' group={this.radioGroup} onPress={this._toggle} /> <MKRadioButtonWrapper title='B' group={this.radioGroup} onPress={this._toggle} /> </View> ); } } 