1.1.0 • Published 3 years ago
react-native-fuzzy-search-picker-modal v1.1.0
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?
: TextInputPropsflatListProps?
: FlatListPropsmodalProps?
: ModalPropsitems
: Item[]visible?
: booleanwithCloseButton?
: booleanonClose
: () => voidonOpen
: () => voidonSelect
: (item: Item) => voidcloseButtonStyle?
: StylePropcloseButtonImageStyle?
: StylePropdisableNativeModal?
: 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