Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/web-ridge/react-native-paper-autocomplete
The autocomplete package you wished for on all platforms (iOS, Android, web)
https://github.com/web-ridge/react-native-paper-autocomplete
Last synced: 3 days ago
JSON representation
The autocomplete package you wished for on all platforms (iOS, Android, web)
- Host: GitHub
- URL: https://github.com/web-ridge/react-native-paper-autocomplete
- Owner: web-ridge
- License: mit
- Created: 2021-06-04T14:33:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-30T16:49:12.000Z (5 months ago)
- Last Synced: 2024-09-21T12:38:03.900Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 537 KB
- Stars: 20
- Watchers: 4
- Forks: 6
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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 (
{
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 (
{
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 (
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`
### Example of custom scrollable container with autocomplete support
```tsx
import CustomScrollView from '../CustomScrollView'
import { createAutocompleteScrollable } from 'react-native-paper-autocomplete'
const AnimatedCustomScrollView = createAutocompleteScrollable(CustomScrollView)
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT