How to emit item select event from JAVA native UI component to react native

831 Views Asked by At

I am using Android's AutoCompleteTextview via Native UI Component in my react native app. I am able to pass the text change events to react native app, but unable to pass on item click event to react native.

Here is my JAVA code

 view.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                WritableMap event = Arguments.createMap();
                event.putString("selectedText", optionList.get(position));
                ReactContext reactContext = (ReactContext) view.getContext();
                reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                        view.getId(),
                        "topSelect",
                        event);

            }
        });

and following is my react native code

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);
    if (!this.props.onTextChange) {
      return;
    }
    this.props.onTextChange(event.nativeEvent.text);
  }
  _onSelect(event: Event) {
    console.log(event);
    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 }

But when I see the console log the select event is not there. What is going wrong here can anyone point out, please?

0

There are 0 best solutions below