Great autocomplete package for React Native Paper with great web support.
yarn add react-native-paper-autocomplete
or
npm install react-native-paper-autocomplete
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 (
<AutocompleteScrollView>
<Autocomplete
onChange={(newValue)=>{
console.log({ newValue })
}}
value={options[0]}
options={options}
inputProps={{
placeholder: 'Select user',
// ...all other props which are available in react native paper
}}
/>
</AutocompleteScrollView>
)
}
function Multi() {
return (
<AutocompleteScrollView>
<Autocomplete
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
}}
/>
</AutocompleteScrollView>
)
}
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 (
<AutocompleteScrollView>
<Autocomplete
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
}}
/>
</AutocompleteScrollView>
)
}
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
import CustomScrollView from '../CustomScrollView'
import { createAutocompleteScrollable } from 'react-native-paper-autocomplete'
const AnimatedCustomScrollView = createAutocompleteScrollable(CustomScrollView)
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT