Nostalgic Perogi Monogramming

    react-native-beauty-dropdown
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    react-native-autocomplete-dropdown

    Dropdown Item picker with search and autocomplete (typeahead) functionality for react native

    license npm npm

    Demo

    Run expo snack demo @akash-gupt/react-native-autocomplete-dropdown

    Nav

    Installation

    Run: npm install --save react-native-autocomplete-dropdown or yarn add react-native-autocomplete-dropdown

    Post-install Steps

    Make sure react-native-vector-icons is installed. Follow the guides https://github.com/oblador/react-native-vector-icons

    yarn add react-native-vector-icons

    iOS

    Run: npx pod-install for install react-native-vector-icons dependency (if not installed yet).

    Android

    Follow the guides from https://github.com/oblador/react-native-vector-icons#android for install react-native-vector-icons dependency (if not installed yet).

    Usage

    import the package

    import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'

    Dataset item format

    dataSet property must be an array of objects or null. Object required keys are:

    {
        id: 'some uniq string id',
        title: 'list item title'
    }

    Example with local Dataset

    const [selectedItem, setSelectedItem] = useState(null)
    
    ;<AutocompleteDropdown
      clearOnFocus={false}
      closeOnBlur={true}
      closeOnSubmit={false}
      initialValue={{ id: '2' }} // or just '2'
      onSelectItem={setSelectedItem}
      dataSet={[
        { id: '1', title: 'Alpha' },
        { id: '2', title: 'Beta' },
        { id: '3', title: 'Gamma' },
      ]}
    />

    Example with remote requested Dataset

        const [loading, setLoading] = useState(false)
        const [suggestionsList, setSuggestionsList] = useState(null)
        const [selectedItem, setSelectedItem] = useState(null)
        const dropdownController = useRef(null)
        const searchRef = useRef(null)
    
        const getSuggestions = useCallback(async (q) => {
            if (typeof q !== "string" || q.length < 3) {
                setSuggestionsList(null)
                return
            }
            setLoading(true)
            const response = await fetch("https://jsonplaceholder.typicode.com/posts")
            const items = await response.json()
            const suggestions = items.map((item) => ({
                id: item.id,
                title: item.title
            }))
            setSuggestionsList(suggestions)
            setLoading(false)
        }, [])
    
        <AutocompleteDropdown
              ref={searchRef}
              controller={(controller) => {
                dropdownController.current = controller
              }}
              dataSet={suggestionsList}
              onChangeText={getSuggestions}
              onSelectItem={(item) => {
                item && setSelectedItem(item.id)
              }}
              debounce={600}
              suggestionsListMaxHeight={Dimensions.get("window").height * 0.4}
             // onClear={onClearPress}
              //  onSubmit={(e) => onSubmitSearch(e.nativeEvent.text)}
             // onOpenSuggestionsList={onOpenSuggestionsList}
              loading={loading}
              useFilter={false} // prevent rerender twice
              textInputProps={{
                placeholder: "Type 3+ letters",
                autoCorrect: false,
                autoCapitalize: "none",
                style: {
                  borderRadius: 25,
                  backgroundColor: "#383b42",
                  color: "#fff",
                  paddingLeft: 18
                }
              }}
              rightButtonsContainerStyle={{
                borderRadius: 25,
                right: 8,
                height: 30,
                top: 10,
                alignSelfs: "center",
                backgroundColor: "#383b42"
              }}
              inputContainerStyle={{
                backgroundColor: "transparent"
              }}
              suggestionsListContainerStyle={{
                backgroundColor: "#383b42"
              }}
              containerStyle={{ flexGrow: 1, flexShrink: 1 }}
              renderItem={(item, text) => (
                <Text style={{ color: "#fff", padding: 15 }}>{item.title}</Text>
              )}
              ChevronIconComponent={
                <Feather name="x-circle" size={18} color="#fff" />
              }
              ClearIconComponent={
                <Feather name="chevron-down" size={20} color="#fff" />
              }
              inputHeight={50}
              showChevron={false}
              //  showClear={false}
            />

    More examples see at https://github.com/akash-gupt/react-native-autocomplete-dropdown/tree/main/example

    Run

    cd example
    yarn install
    yarn add react-native-vector-icons
    npx pod-install
    npm run ios
    

    Options

    Option Description Type Default
    dataSet set of list items array null
    initialValue string (id) or object that contain id string | object null
    loading loading state bool false
    useFilter whether use local filter by dataSet (useful set to false for remote filtering) bool true
    showClear show clear button bool true
    showChevron show chevron (open/close) button bool true
    closeOnBlur whether to close dropdown on blur bool false
    closeOnSubmit whether to close dropdown on submit bool false
    clearOnFocus whether to clear typed text on focus bool true
    debounce wait ms before call onChangeText number 0
    suggestionsListMaxHeight max height of dropdown number 200
    bottomOffset for calculate dropdown direction (e.g. tabbar) number 0
    onChangeText event textInput onChangeText function
    onSelectItem event onSelectItem function
    onOpenSuggestionsList event onOpenSuggestionsList function
    onClear event on clear button press function
    onSubmit event on submit KB button press function
    onFocus event on focus text input function
    controller return reference to module controller with methods close, open, toggle, clear function
    containerStyle object
    rightButtonsContainerStyle object
    suggestionsListTextStyle object
    textInputProps object
    suggestionsListContainerStyle object
    ChevronIconComponent React.Component Feather chevron icon
    ClearIconComponent React.Component Feather x icon
    ScrollViewComponent React.Component name ScrollView that provide suggestions content

    Install

    npm i react-native-beauty-dropdown

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    31.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • akash-gupta