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

    @nafplann/react-native-dropdown-autocomplete
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.17 • Public • Published

    react-native-dropdown-autocomplete

    npm npm

    Based on https://bit.ly/2AFjUsj, the most significant advantage of this package among all others is that you can have multiple autocomplete's on your page after following instructions below. Works on Android and IOS.

    Autocomplete demo Autocomplete demo with pre-filled inputs

    Usage

    Install the package
    npm i react-native-dropdown-autocomplete
    
    Wrap the page you want to have autocomplete on with withKeyboardAwareScrollView:
    import React, {Component} from "react";
    import {StyleSheet, View, SafeAreaView} from "react-native";
    import {Ionicons} from "@expo/vector-icons";
    import shortid from "shortid";
    import {Autocomplete, withKeyboardAwareScrollView} from "react-native-dropdown-autocomplete";
     
    class HomeScreen extends Component {
      handleSelectItem(item, index) {
        const {onDropdownClose} = this.props;
        onDropdownClose();
        console.log(item);
      }
     
      render() {
        const autocompletes = [...Array(10).keys()];
     
        const apiUrl = "https://5b927fd14c818e001456e967.mockapi.io/branches";
     
        const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;
     
        return (
          <View style={styles.autocompletesContainer}>
            <SafeAreaView>
              {autocompletes.map(() => (
                <Autocomplete
                  key={shortid.generate()}
                  style={styles.input}
                  scrollToInput={ev => scrollToInput(ev)}
                  handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
                  onDropdownClose={() => onDropdownClose()}
                  onDropdownShow={() => onDropdownShow()}
                  renderIcon={() => (
                    <Ionicons name="ios-add-circle-outline" size={20} color="#c7c6c1" style={styles.plus} />
                  )}
                  fetchDataUrl={apiUrl}
                  minimumCharactersCount={2}
                  highlightText
                  valueExtractor={item => item.name}
                  rightContent
                  rightTextExtractor={item => item.properties}
                />
              ))}
            </SafeAreaView>
          </View>
        );
      }
    }
    const styles = StyleSheet.create({
      autocompletesContainer: {
        paddingTop: 0,
        zIndex: 1,
        width: "100%",
        paddingHorizontal: 8,
      },
      input: {maxHeight: 40},
      inputContainer: {
        display: "flex",
        flexShrink: 0,
        flexGrow: 0,
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "center",
        borderBottomWidth: 1,
        borderColor: "#c7c6c1",
        paddingVertical: 13,
        paddingLeft: 12,
        paddingRight: "5%",
        width: "100%",
        justifyContent: "flex-start",
      },
      container: {
        flex: 1,
        backgroundColor: "#ffffff",
      },
      plus: {
        position: "absolute",
        left: 15,
        top: 10,
      },
    });
     
    export default withKeyboardAwareScrollView(HomeScreen);

    Usage without data-driven content

    You can also pass fixed array of items to the Autocomplete

    const data = [
      "Apples",
      "Broccoli",
      "Chicken",
      "Duck",
      "Eggs",
      "Fish",
      "Granola",
      "Hash Browns",
    ];

    Change valueExtractor and pass the data to Autocomplete without fetchDataUrl

    <Autocomplete data={data} valueExtractor={item => item} />

    Properties

    name description type default
    ref Used to access component methods ("clearInput" for example) RefObject -
    autoCorrect Disable auto-correct Boolean true
    keyboardType Input Keyboard Type String default
    highlightText Highlight search results Boolean true
    highLightColor Highlight text color String #129a8d
    rightContent Render additional text to the right of the item Boolean false
    resetOnSelect Reset the input after choosing an item Boolean false
    minimumCharactersCount Perform API request after certain number of characters entered Number 2
    waitInterval Timeout between user finished typing and new data fetch Number 400
    placeholder Autocomplete input placeholder text String Add Item
    placeholderColor Input placeholder color String #acada9
    spinnerSize Size of activity indicator String small
    spinnerColor Activity indicator color String #129a8d
    listHeader Text at the beginning of suggestions String -
    fetchDataUrl Data source url String -
    noDataText Text to display when no results String No Results
    initialValue Text to display initially String -
    inputContainerStyle Styles for autocomplete container Object -
    disableFullscreenUI disable display inputfield in fullscreen Boolean false
    inputStyle Styles for autocomplete input Object -
    spinnerStyle Styles for activity indicator Object -
    noDataTextStyle Styles for empty results text Object -
    separatorStyle Styles for item dividers Object -
    listFooterStyle Styles for list footer Object -
    listHeaderStyle Styles for list header Object -
    rightContentStyle Styles for right content Object -
    rightContentItemStyle Styles for right content text Object -
    listHeaderTextStyle Styles for list header text Object -
    overlayStyle Styles for overlay view Object -
    pickerStyle Styles for item picker view Object -
    containerStyle Styles for dropdown container view Object -
    scrollStyle Styles for dropdown flatlist Object -
    scrollToInput Focus on selected field Function -
    handleSelectItem Selection callback (args: item, index) Function -
    onDropdownShow Show keyboard Function -
    onDropdownClose Hide keyboard Function -
    onChangeText Autocomplete input text changes Function -
    renderIcon Render icon near input Function -
    valueExtractor Extract value from item (args: item, index) Function ({ value }) => value
    rightTextExtractor Extract value from item (args: item, index) Function ({ value }) => value
    fetchData Fetch data for autocomplete Function -

    Methods

    You can use methods through ref property:

    ...
    const componentRef = useRef()
    <Autocomplete
      ref={componentRef}
      ...
    />
    ...
    componentRef.current.clearInput()

    Methods list

    method description return
    clearInput Clears input value -

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):

    Paito Anderson
    Paito Anderson

    💻

    Authors:

    Maksym Plotnikov

    Maksym Kordiyak

    While developing our react-native application I found out that there's no autocomplete library available which can satisfy a need for > 1 autocomplete on a page. Styles were overlapping and due to position: "absolute" we weren't able to actually trigger TouchableOpacity on an element from the list on android device. We used a library which provides dropdown with auto-adjusting position using measureInWindow on a ref, we tweaked it a bit and with autocomplete input and time-slicing implementation we managed to get what we need. Still we can't interact with TextInput component while dropdown is opened but this is the best result we got using React Native Modal.

    Install

    npm i @nafplann/react-native-dropdown-autocomplete

    DownloadsWeekly Downloads

    1

    Version

    1.0.17

    License

    MIT

    Unpacked Size

    51.4 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar