Have ideas to improve npm?Join in the discussion! »

    @mad-family-ui/react-native-autocomplete
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-native-autocomplete

    A pure TypeScript autocomplete component for React Native (iOS) (Android - Not working completely).

    Autocomplete Example

    How to use react-native-autocomplete

    Installation

    $ npm install --save @mad-family-ui/react-native-autocomplete

    Example

    // ...
    
      return (
        <Autocomplete
            list={[
              {name: 'Apple', value: 'apple'},
              {name: 'Orange', value: 'orange'},
              {name: 'Grape', value: 'grape'},
              {name: 'Banana', value: 'banana'},
            ]}
            labelKey="name"
            valueKey="value"
         />
      );
    
    // ...

    A complete example for iOS can be found here.

    Props

    Prop Type Description
    list* Array of object List of objects used as the data for the Autocomplete
    zIndex number the container component will have this zIndex set. Useful when you have multiple Autocomplete in 1 Screen
    containerHeight string / number The outermost container height
    labelKey* string The key searched for in the list for showing the text in the autocomplete suggestion list
    valueKey* string The key searched for in the list for finding selected item
    searchKeys* Array of strings This array of keys is used to filter out the suggestions from the list of objects passed
    onSelectItem* (item: any) => void When Item is selected, this function is invoked to return the selected item.
    defaultValue string If provided, will find the item from list using valueKey and set it selected by default
    containerStyle style These styles will be applied to the container which surrounds the autocomplete component.
    listContainerStyle style These styles will be applied to the container which surrounds the autocomplete suggestion list component (ScrollView).
    inputContainerStyle style These styles will be applied to the input container which surrounds the input component.
    inputStyle style These styles will be applied to the input component.
    listItemContainerStyle style These styles will be applied to the container which surrounds the suggestion item component.
    listItemTextStyle style These styles will be applied to the suggestion item.
    customItemRenderer (item: any, index: number) => React.ReactElement Custom Item Renderer
    noResultComponent React.ReactElement Custom No Result Component
    theme "light"/"dark" Support for dark and light theme. Useful if creating an app when you are supporting phone theme used

    Android

    • To make this component work on Android, we need to specify the containerHeight property as Android cannot detect clicks in absolute positioning.

    Changelog

    1.0.0

    • Used Flatlist instead of Scrollview for performance improvements.

    Contribute

    • Android has issues with able to detect clicks with absolute positioning. If you could help solve this issue, please help :)
    • Feel free to open issues or do a PR!

    Install

    npm i @mad-family-ui/react-native-autocomplete

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    38.5 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar