vishaldhanotiya / react-native-modal-picker

This is a cross-platform picker with search bar for react native support both platform IOs and android
https://www.npmjs.com/package/rn-modal-picker
44 stars 18 forks source link

Double tap to select item from the dropdown list #9

Closed rohan-paul closed 3 years ago

rohan-paul commented 4 years ago

Upon tapping on any list-item,keyboard gets closed first and the item is selected when I tap again. Basically it takes double taps to select an item. First hides the keyboard. Second selects the item.

I have tried including keyboardShouldPersistTaps={"always"} but did not work.

vishaldhanotiya commented 4 years ago

Hello @rohan-paul I am try to use picker with scrollView. I was face same issue as you but if we added keyboardShouldPersistTaps={"always"} the problem is solved. Please check below mention code it will help to solve your problem

 <View style={{  flex: 1,
    alignItems: "center",
    justifyContent: "center"}}>
       <ScrollView   keyboardShouldPersistTaps={"always"}  style={{flex:1}}>
        <Text style={{marginBottom:50,fontSize:25,fontWeight:'bold'}}>{"React Native Picker With Search"}</Text>
        <RNPickerDialog
          dataSource={this.state.dataSource}
          dummyDataSource={this.state.dataSource}
          defaultValue={false}
          pickerTitle={"Sort by"}
          showSearchBar={true}
          showPickerTitle={true}
          pickerStyle={Styles.pickerStyle}
          selectedLabel={this.state.selectedText}
          placeHolderLabel={this.state.placeHolderText}
          searchBarPlaceHolder={"Search....."}
          searchBarPlaceHolderColor={"#9d9d9d"}
          selectLabelTextStyle={Styles.selectLabelTextStyle}
          placeHolderTextStyle={Styles.placeHolderTextStyle}
          dropDownImageStyle={Styles.dropDownImageStyle}
          searchBarContainerStyle={Styles.searchBarContainerStyle}

          dropDownImage={require("./res/ic_drop_down.png")}
          selectedValue={(index, name) => this._selectedValue(index, name)}
        />
        </ScrollView>
      </View>