Skip to content

Unable to detect topSelect event from native UI component #16760

@rajsuvariya

Description

@rajsuvariya

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

OS:  macOS 
Node:  6.11.4
npm:  5.4.2
Watchman:  4.9.0
Android Studio:  3.0 stable

Steps to Reproduce

(Write your steps here:)

  1. from native ui component AutoCompleteTextView (android) emit event on item select listner
WritableMap event = Arguments.createMap();
event.putString("selectedText", optionList.get(position).toString());
ReactContext reactContext = (ReactContext) view.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                        view.getId(),
                        "topSelect",
                        event);
  1. handle event in react native component
import PropTypes from 'prop-types';
import React from 'react'
import { requireNativeComponent, View } from 'react-native';

class AutoCompleteTextView extends React.Component {
  constructor(props) {
    super(props);
    this._onChange = this._onChange.bind(this);
    this._onSelect = this._onSelect.bind(this);
  }
  _onChange(event: Event) {
    console.log(event.nativeEvent.text, event.nativeEvent);
    if (!this.props.onTextChange) {
      return;
    }
    this.props.onTextChange(event.nativeEvent.text);
  }
  _onSelect(event: Event) {
    console.log(event.nativeEvent);
    if (!this.props.itemClickListener) {
      return;
    }
    this.props.itemClickListener(event.nativeEvent.selectedText);
  }
  render() {
    return <RCTAutoCompleteTextView {...this.props} onChange={this._onChange} onSelect={this._onSelect} />;
  }
}

AutoCompleteTextView.propTypes = {
  dataSource: PropTypes.array.isRequired,
  value: PropTypes.string.isRequired,
  onTextChange: PropTypes.func.isRequired,
  itemClickListener: PropTypes.func.isRequired,
  showDropDown: PropTypes.bool,
  showDropDownArrow: PropTypes.bool,
  hint: PropTypes.string,
  ...View.propTypes
};

var RCTAutoCompleteTextView = requireNativeComponent(`RCTAutoCompleteTextView`, AutoCompleteTextView, {
  nativeOnly: {onChange: true, onSelect: true}
});

export { AutoCompleteTextView }

  1. look at console logs

Expected Behavior

Event should be logged in console

Actual Behavior

Nothing happens in console

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions