rn-searchable-picker

rn-searchable-picker is a small library that provides a dropdown menu which has an ability to search and select. So that React Native developers can use this for large set of items. Working for both Android and iOS.

Try it and make your life simpler!

Installation

npm install rn-searchable-picker --save yarn add rn-searchable-picker

Properties and Methods

| Prop | Description | Default | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | | value | Initial selected value. It should be a value of an item in data Array. | None | | onValueChange | A void method which executes when the selected value changes. Ex : (value, index, item) => console.log(value, index, item) | None | | items | Dropdown items. Ex : [ {label: 'Label', value: 'value'}, ] | [ ] | | backgroundColor | Background color of the button. | #007AFF | | placeholder | Placeholder object. Ex : {label: 'Select Value', value: 'placeholder'}. | { } | | searchPlaceholder | Placeholder for search field. | None | | containerStyle | Background style for selected value. | Style Object | | placeholderStyle | Placeholder style | Style Object | | valueStyle | Selected value style | Style Object | | onOpen | A void function which executes when opening the dropdown. Ex : () => console.log('Picker is opening') | None | | onClose | A void function which executes when opening the dropdown. Ex : () => console.log('Picker is closing') | None | | onChangeText | A void method which executes when typing in search field. Ex : text => console.log(text) | None | | renderIcon | Icon for dropdown. Ex : color => <AntDesign name={'down'} size={15} color={color} /> | Arrow Down Icon | | closeByBackgroundTouch | Close picker by touching background blur area without close icon | false | | selectedValueBackgroundColor | Selected value background color | #F0F0F0 | | selectedValueColor | Selected value color | #000000 | | itemBackgroundColor | Background color of items in list. | None | | itemColor | Item text color | #000000 | | textInputStyle | Search field input text style | Style Object | | disabled | To disable or enable | false |

Usage

import { View, Text, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import RNSearchablePicker from 'rn-searchable-picker'
import AntDesign from 'react-native-vector-icons/AntDesign'

const App = () => {

  const data = [
    { label: 'Item 01', value: 'value 01', extra: "something else" },
    { label: 'Item 02', value: 'value 02' },
    { label: 'Item 03', value: 'value 03' },
    { label: 'Item 04', value: 'value 04', extra: "something else" },
    { label: 'Item 05', value: 'value 05' },
    { label: 'Item 06', value: 'value 06' },
  ]

  const renderIcon = color => <AntDesign name={'down'} size={15} color={color} />

  return (
    <View style={styles.container}>
      <RNSearchablePicker
        value={'value 02'} // initial value (optionsl)
        onValueChange={(value, index, item) => console.log(value, index, item)}
        items={data} // required
        placeholder={{
          label: 'Select Value',
          value: 'placeholder'
        }}
        searchPlaceholder={'Type here...'}
        onOpen={() => console.log('Picker is opening')}
        onClose={() => console.log('Picker is closing')}
        renderIcon={renderIcon}
        onChangeText={text => console.log(text)}
        closeByBackgroundTouch={true} />
    </View>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
   padding: 10,
  },
})

Note

If you have used this inside a ScrollView, you can mention ths property to select an item when keyboard is opened, keyboardShouldPersistTaps={'handled'}.

<ScrollView
  style={styles.container}
  keyboardShouldPersistTaps={'handled'}>
  <RNSearchablePicker items={data} />
</ScrollView>