React-native component SearchableDropdown from react-native-searchable-dropdown doest not fire onItemSelect={(item) => {console.log(item)}}

Question

I want to use SearchableDropdown from react-native-searchable-dropdown as adrop down select with auto completion. The event onItemSelect is supposed to be fired when select an element from dropdown list. But it does not trigger so.

import SearchableDropdown from 'react-native-searchable-dropdown';
import React, {Component} from 'react';

 constructor(props) {
    super(props);
    this.state = {
      selectedId: 0,
    };
  }

...

export default class SearchComponent extends Component {

render() {
   return(
      <ScrollView>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          containerStyle={{padding: 5}}
          itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: 'white',
            borderColor: 'white',
            borderWidth: 1,
            borderRadius: 5,
          }}
          itemTextStyle={{color: 'black'}}
          itemsContainerStyle={{height: 220}}
          items={skills}
          resetValue={false}
          textInputProps={{
            placeholder: 'Placeholder',
            underlineColorAndroid: 'transparent',
            style: {
              padding: 12,
              borderWidth: 1,
              backgroundColor: 'white',
              borderColor: theme.colors.caption,
              borderRadius: 10,
            },
            onTextChange: text => alert(text),
          }}
          listProps={{
            nestedScrollEnabled: true,
          }}
        />
    </ScrollView>
)}

Can someone help me with the solution?

Answer 1

This issue can also be fixed by adding this prop keyboardShouldPersistTaps = 'always' to your ScrollView component.

This fixed the issue for me, See below:

render() {
   return(
      <ScrollView 
         keyboardShouldPersistTaps = 'always'>
        <SearchableDropdown
          onItemSelect={item => console.log(item)}
          ...
        />
      </ScrollView>
   )
}