react-native-paper-autocomplete (⚠️ in beta)

Great autocomplete package for React Native Paper with great web support.
- Uses re-animated to be smooth on iOS/Android/Web
- Keyboard support (Arrow down/up/end/start)
- Single + multiple
- Async connect with backend
- Grouped results
- Great web support (scrollable while open)

Installation

``sh
yarn add react-native-paper-autocomplete
`
or
`sh
npm install react-native-paper-autocomplete
`

Simple

`jsx
const options = [
{ value: 1, label: 'Ruben von der Vein' },
{ value: 2, label: 'Pjotr Versjuurre' },
{ value: 3, label: 'Bjart von Klef' },
{ value: 4, label: 'Riesjard Lindhoe' }
]
function Single() {
return (

onChange={(newValue)=>{
console.log({ newValue })
}}
value={options[0]}
options={options}
inputProps={{
placeholder: 'Select user',
// ...all other props which are available in react native paper
}}
/>

)
}

function Multi() {
return (

multiple={true}
onChange={(newValue)=>{
console.log({ newValue })
}}
value={[options[0], options[1]]}
options={options}
inputProps={{
placeholder: 'Select user',
// ...all other props which are available in react native paper
}}
/>

)
}
`




Advanced

`jsx


function Multi() {
const [options, setOptions] = React.useState([
{ id: 1, name: 'Ruben von der Vein', gender: 'girl' },
{ id: 2, name: 'Pjotr Versjuurre', gender: 'boy' },
{ id: 3, name: 'Bjart von Klef', gender: 'boy' },
{ id: 4, name: 'Riesjard Lindhoe', gender: 'boy' }
])
const onEndReached = () => {
// fetch more items (paginated) e.g:
const response = api.fetch(...)
setOptions(prev => [...prev, response.data])
}

return (

multiple={true}
getOptionLabel={(item) => item.name}
getOptionValue={(item) => item.id}
onChange={(newValue)=>{
console.log({ newValue })
}}
value={[options[0], options[1]]}
options={options}
// if you want to group on something
groupBy={(option) => option.gender}
inputProps={{
placeholder: 'Select user',
// ...all other props which are available in react native paper
onChangeText: (search) => {
// Load from your backend
},
}}

listProps={{
onEndReached
// + other FlatList props or SectionList if you specify groupBy
}}
/>

)
}
`




Custom scrollable containers


* If your autocomplete is inside a ScrollView use AutocompleteScrollView instead of the native ScrollView
* If your autocomplete is inside a FlatList use AutocompleteFlatList instead of the native FlatList

* If you're using another scrollable component, make sure it has te same api as the scrollView and supports the
following properties: ref, scrollEventThrottle, keyboardShouldPersistTaps, onScroll

$3

`tsx
import CustomScrollView from '../CustomScrollView'
import { createAutocompleteScrollable } from 'react-native-paper-autocomplete'
const AnimatedCustomScrollView = createAutocompleteScrollable(CustomScrollView)
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT