react-native-input-autocomplete

react-native-input-autocomplete

A simple and fully customizable React Native component that can be used for autocompletion when searching data from local or remote source.

Installation

$ npm install --save react-native-input-autocomplete

or

$ yarn add react-native-input-autocomplete

Usage

// ...


import React, { useState } from "react";
import { Autocomplete } from "react-native-input-autocomplete";

const ExampleApp = props => {

    const [isVisible, setIsVisible] = useState(false);
    const [addressOptions, setAddressOptions] = useState([]);

    const defaultOptions = [
        {
            id: "1",
            label: "Home",
            description: "200 Larkin St, San Francisco, CA 94102"
        },
        {
            id: "2",
            label:"Work",
            description: "1 Dr Carlton B Goodlett Pl, San Francisco, CA 94102"
        }
    ];

    const autocompleteInputHandler = async input => {
        const result = await fetch("http://example.com/address");
        const data = await result.json();
        setAddressOptions(data);
    };

    const selectValue = (value) => {
        // Value is whatever user selected in autocomplete.
    };

    render() {
        return (
            <Autocomplete 
                visible={isVisible}
                autocompleteOptions={addressOptions}
                defaultOptions={defaultOptions}
                dividerTitle={"Your Favourite Addresses"}
                onInputChange={autocompleteInputHandler}
                onSelect={selectValue}
                hideAutocomplete={() => setIsVisble(false)}
            />
        );
    }

};

// ...

Props

Prop	Type	Description
visible	boolean	Set to true to show the component.
autocompleteOptions	array	An array with the list of suggested options.
defaultOptions	array	An array with the list of pre-saved favourite options.
dividerTitle	string	A string that divides the suggested list from the default list.
onInputChange	function	The callback that will be called when the user starts typing in the input container.
onSelect	function	The callback that will be called once the user selects an option from the autocomplete suggestions.
hideAutocomplete	function	The callback hides the autocomplete component.

Contribute

Feel free to open issues or do a PR!