react-native-fuzzy-search-picker-modal

Picker Modal with fuzzy search input for React Native.

Before you proceed

This is based on work of Xavier Carpentier and its react-native-country-picker-modal. I just take the modal picker part and make it generic for any kind of data.

Bellow is the original demo video of react-native-country-picker-modal. Be ware that not all props exists and this version has an items required prop. See Props section for more details

| iOS | Android | Web | | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | | | |

Installation

$ yarn add react-native-fuzzy-search-picker-modal

Basic Usage

For more complete example open App.tsx

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { PickerModal, Item } from 'react-native-fuzzy-search-picker-modal'

const styles = StyleSheet.create({
  // ...
})

const items: Item[] = [
  { value: 'US', label: 'United State' },
  { value: 'BR', label: 'Brazil' },
]

export default function App() {
  const [selectedItem, setSelectedItem] = useState<Item>(null)
  const [visible, setVisible] = useState<boolean>(false)

  const switchVisible = () => setVisible(!visible)

  return (
    <View style={styles.container}>
      <PickerModal
        items={items}
        modalProps={{ visible }}
        filterProps={{ placeholder: 'Select a country' }}
        onClose={() => setVisible(false)}
        onOpen={() => setVisible(true)}
        onSelect={setSelectedItem}
      />

      <Button title={'Open modal'} onPress={switchVisible} />

      {selectedItem !== null && (
        <Text style={styles.data}>{JSON.stringify(selectedItem, null, 0)}</Text>
      )}
    </View>
  )
}

Props

• filterProps?: TextInputProps
• flatListProps?: FlatListProps
• modalProps?: ModalProps
• items: Item[]
• visible?: boolean
• withCloseButton?: boolean
• onClose: () => void
• onOpen: () => void
• onSelect: (item: Item) => void
• closeButtonStyle?: StyleProp
• closeButtonImageStyle?: StyleProp
• disableNativeModal?: boolean (you have to wrap your all app with ModalProvider)

FAQ

Is it supported and tested both on android and iOS?

YES

Questions

Feel free to create an issue

Licence

MIT © Made with love a keyboard by Danilo Barros