onmotion / react-native-autocomplete-dropdown Goto Github PK

How to disable chevron animation?

I tried to wrap the autocomplete to scrollview but i got this error.

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead

Been looking for a react native autocomplete library and they all seem to have issues with certain conditions and functionality that I need. However react-native-autocomplete-dropdown seems to work really nicely and tick all the boxes...except that I am trying to align the look of the input with Text Input from react-native-paper.

With other dropdown/autocomplete libraries, there is usually the option to have a custom component for rendering the input, but this doesn't seem to be possible with this library? Any way to do this, or do I need to manually work up the styles as best I can to match? The issue with styling approach is it is quite difficult to match everything up, especially the floating labels/placeholder that you get with paper.

Is there an option to force a pick only from the dataSet? maybe with the renterItem option?

Hi,

I have got problem when I try choose option from dropdown. It's dosen't work in ScrollView, but in View component it's ok. Do you know why, and how fix it to work corectly in ScrollView?

I am trying to create a nested autocomplete objects. Strangely, the suggestionlist of first object is hiding below second object. I tried setting zIndex of suggestionlist container. Please guide.

How can I hide the suggestionList if the input text length is < than 3 for example.

I already try using onFocus prop with the useRef like this

const handleOnFocus = () => {
    dropdownController.current?.close();
 };

but it didn't work

I am facing an issue similar to the one mentioned in the /issues/16 in my iOS. This works as expected in Android.

The difference to the above mentioned issue is, here the dropdown is present inside a KeyboardAwareScrollView which is inturn present inside a Modal. I have tried React.Fragment for parent View and tried zIndex as well. But nothing seems to be helping. Or may be im applying it wrong. Please let me know if any further details needed to explain the issue.

First of All Thank you for the wonderful library. I would like to clear the input programatically instead of clear button. can u please suggest me something to implement like this.

Downgrade to version 1.2.1 solves the problem

47aa264 - the commit

Getting this error when using this library. Even when not passing in the ScrollViewComponent prop.

Was wondering if anyone else had seen this?

Hello everyone is there any way to change the color of the placeholder?

Code:

<AutocompleteDropdown
        clearOnFocus={false}
        closeOnBlur={false}
        closeOnSubmit={false}
        showClear={false}
        initialValue={{ id: '1' }} 
        inputContainerStyle={styles.inputContainerStyle}
        textInputProps={{
          placeholder: 'select item',
          style: {
            fontSize: 20,
          },
        }}
        suggestionsListMaxHeight={Dimensions.get('window').height * 0.5}
        dataSet={dataSet}
      />

When not using renderItem, It can autocomplete text strings. But on using renderItem, component cannot autocomplete strings.

In example RemoteDataExample (not using renderItem)

In example RemoteDataExample3 (using renderItem), you can see the difference between dropbox.

Very nice autocomplete-dropdown library! please fix this issue....

I've implemented a simple autocomplete box driven by a local dataset. I memoize the list without dependencies, and the behavior of the search results seems inconsistent. In the video I've attached, you can see me trying to search for Artist, which appears sometimes and not others, but I've confirmed that the blank row is still connected to the right list item (i.e., when I click on it, it does respond as I expect).

I can't figure out what makes it show or not, since you can see in the video that I do ultimately make it appear by just typing and backspacing a few times, selecting other items, etc. It doesn't appear to be related to which item is currently selected.

I'm a fan of how good the default styling is out of the box, so I'd love to make this work. Do you have any ideas?

I don't currently have time to make a fully reproducible demo, but the component is quiet simple:

import React, { useState, useContext, useMemo } from 'react';
import { View } from 'react-native';
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'

import DecksContext from 'CONTEXTS/decks';
import Card from './Card';

export default function CardFinder() {
  const { ownedCards } = useContext(DecksContext);

  const cardsList = useMemo(() => {
    return ownedCards.map(card => ({ id: card.card_id, title: card.title }));
  }, []);

  const [ cardId, setCardId ] = useState(null);

  return (
    <View>
      <AutocompleteDropdown
        onSelectItem={({ id }) => setCardId(id)}
        dataSet={cardsList}
      />
      {cardId ? (
        <Card id={cardId} />
      ) : null}
    </View>
  );
}

Version info:

"expo": "~42.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-autocomplete-dropdown": "^1.1.4",

When using typescript, the linter, or whatever checks the intrinsic props, shows an error saying that the textInputProps is an invalid prop, however if I run the react native app, it works!

I've found that when I set the loading prop to true the loading spinner appears, but it doesn't animate - it doesn't really convey the same message that it's loading when it's stationary.

Hi, in your web example, the dropdown is hidden behind other components that are below it in the DOM hirarchy. Are you aware of this issue ?

Hi, my suggestion list texts are not bolding based on user input (in this case 'saur' should be highlighted according to the examples). I also copied the provided examples but it's still not bolding for me.

While focus the input it triggers the below error.

ERROR VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Here is my code.
<KeyboardAwareScrollView keyboardShouldPersistTaps='always' enableOnAndroid={true} contentContainerStyle={{ flexGrow: 1 }}>
<AutoCompleteInput
name='cityId'
dataSet={cities}
placeholder='City'
disabled={!(isCityDisable || cities.length <= 0)}
titleKey='cityName'
titleId='cityId'
closeOnBlur={true}
emptyResultText='No city found'
/>

Hi! I want to create such an error in DropDown. Did you create this feature?
Thank you in advance for your guidance.

ERROR VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

In ios, item is not selected

I have over 450 author names array but throws a following warning:

Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code:

Hi,

I have been facing the issue for a very long time but all my attempts toward success are failed. I am unable to open the dropdown on an IOS device.
For Android, it's working fine. If there's no solution to the issue, I might need to go for some other plugin.
Please have a look. Make sure to test in both iOS and Android.
Link: https://snack.expo.dev/72Vq1000k?platform=ios

I see there is a new props to modify the Nothing found text on the Autocomplete but it (please correct me if I'm wrong on this) does not seem to be released yet.

So is there a way to disable it on the current version?

Tyvm

i have a data list like this ```
"data": {
"hotels": [
{
"id": "happiness_guesthouse",
"name": "Happiness Guesthouse",
"region_id": 6056164
},
{
"id": "478_msl_pak_chong",
"name": "478 MSL. Pak Chong",
"region_id": 6056164
},
{
"id": "the_pino_hotel_pakchong",
"name": "The Pino Hotel Pak-Chong",
"region_id": 6056164
},
{
"id": "baanthai_norway_pak_chong",
"name": "BaanThai Norway Pak Chong",
"region_id": 6056164
},
{
"id": "rachamanee_resort",
"name": "Rachamanee Resort",
"region_id": 6056164
}
],
"regions": [
{
"id": 6056164,
"name": "Pak Chong",
"type": "City",
"country_code": "TH"
},
{
"id": 6159488,
"name": "Le Paquier",
"type": "City",
"country_code": "CH"
},
{
"id": 6304681,
"name": "Pak Khlong",
"type": "City",
"country_code": "TH"
},
{
"id": 6307227,
"name": "Pak Tako",
"type": "City",
"country_code": "TH"
}
]
}

the best solution for this is section list. i have try but there were multiple. 

any solution for this

We are using Storybook in our project to document the components we created for the app. After we installed this library storybook stopped working in the app.

Below is our App.tsx file, for some reason the fonts are never loaded and it stays forever on the AppLoading component. Both true and false values for renderDoc end up loading forever.

import React from 'react';

import { useFonts } from 'expo-font';
import { Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';

import AppLoading from 'expo-app-loading';
import { ThemeProvider } from 'styled-components';
import { appTheme } from './src/styles/theme';

import { StatusBar } from './src/components';
import { Routes } from './src/routes';
import Storybook from './storybook';

const renderDoc = false;

const App = () => {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <ThemeProvider theme={appTheme}>
      {renderDoc ? (
        <Storybook />
      ) : (
        <>
          <StatusBar />
          <Routes />
        </>
      )}
    </ThemeProvider>
  );
};

export default App;

If we change it to this code below then it works to at least run the app.

return (
    <ThemeProvider theme={appTheme}>
          <StatusBar />
          <Routes />
    </ThemeProvider>
  );

If we keep the Storybook code and remove the loading verification then storybook runs but none of the components work because of an error with font loading.

Downgrade to version 1.2.1 solves the problem

47aa264 - the broken commit

I am trying to enable this dropdown based on a condition. But, I don't find a property to disable/enable the input field. Please let me know whether there is any way to implement

is there a feature wherein upon selecting an item from the list programmatically instead of manually selecting an item?

There are still some missing types in index.d.ts that cause TypeScript errors:

1. renderItem function can return undefined – it's useful for filtering options
2. ItemSeparatorComponent is completely missing, it can be passed as a prop to change options separator or (when false) to remove it completely.

Hello everyone I need to remove border line of the dropdown items.
Even try using the renderItem to create new list items of drop down. But I can't find any way to remove the dropdown list border.

Please see the example below:

Code:

import React, { useState } from 'react';
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { styles } from './styles/autocomplete.styles';
import { Text } from 'native-base';
import { Dimensions, Platform } from 'react-native';

export function AlAutoComplete() {
const [selectedItem, setSelectedItem] = useState();
const dataset = [
{ id: '1', title: 'Alpha' },
{ id: '2', title: 'Beta' },
{ id: '3', title: 'Gamma' },
{ id: '4', title: 'Gamma' },
{ id: '5', title: 'Gamma' },
{ id: '6', title: 'Alpha' },
{ id: '7', title: 'Alpha' },
{ id: '8', title: 'Alpha' },
{ id: '9', title: 'Alpha' },
{ id: '10', title: 'Gamma' },
{ id: '11', title: 'Gamma' },
{ id: '12', title: 'Gamma' },
{ id: '13', title: 'Gamma' },
{ id: '14', title: 'Gamma' },
{ id: '15', title: 'Gamma' },
];

return (
<AutocompleteDropdown
clearOnFocus={false}
closeOnBlur={false}
closeOnSubmit={false}
showClear={false}
initialValue={{ id: '1' }}
onSelectItem={setSelectedItem}
inputContainerStyle={styles.inputContainerStyle}
suggestionsListMaxHeight={Dimensions.get('window').height * 0.5}
dataSet={dataset}
/>
);
}

export default AutoComplete;

How exactly do I render a custom TextInput like react-native-paper?

I attempted to render it with the InputComponent and receive an error: null is not an object (evaluating j.current.blur) when i click on the selection.

When I render with the render prop from react-native-paper TextInput, the selection overlaps the label.

Any help is appreciated.

Please find the snack below:

https://snack.expo.dev/29Lnl2f2-

Is there no #onchangeitem option in َAutocompleteDropdown?
Help if you can
Thanks

I'm facing some issues when using this component inside a parent scrollView. Basically I can't scroll and also the keyboardAvoidView doesn't work too.

I'm getting an issue on Android where while the dropdown appears, I can't interact with the dropdown selections at all. It seems to occur whenever I wrap the control in a <View> and apply any styling to that view.

Here is a snack to demonstrate the issue https://snack.expo.dev/@ipwright83/react-native-autocomplete-dropdown. Running on Android you're unable to interact with the dropdown (unless you comment out borderColor and borderWidth) on lines 53-54.

This only seems to affect Android, it works correctly on iOS.

Here's some code to reproduce:

import React, { Node, useState } from 'react';
import {
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';

const App: () => Node = () => {
  const styles = getStyles();
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <React.Fragment>
      <View style={styles.spacer} />
      <View style={styles.container}>
        <AutocompleteDropdown
          clearOnFocus={false}
          closeOnBlur={true}
          initialValue={{ id: '2' }} // or just '2'
          dataSet={[
            { id: '1', title: 'Alpha' },
            { id: '2', title: 'Beta' },
            { id: '3', title: 'Gamma' },
          ]}
        />
        <Text style={{ color: '#668', fontSize: 13 }}>
          Selected item: {JSON.stringify(selectedItem)}
        </Text>
      </View>
    </React.Fragment>
  );
};

const getStyles = () => ({
  spacer: {
    height: 50,
  },
  container: {
    borderColor: "red",
    borderWidth: 1,
  }
});

export default App;

For some reason, the suggestion text is not visible. Here is the code:

<AutocompleteDropdown
                initialValue={{ id: '2' }} // or just '2'
                
                inputContainerStyle={{
                  backgroundColor: 'transparent',
                  marginLeft: 3,
                  maxWidth: 166,
                  height: 20,
                  marginTop: -15,
                  zIndex: 10,
                }}
                suggestionsListContainerStyle={{
                  
                  marginTop: -30,
                  marginLeft: 10,
                  width: 231,
                  height: 135,
                  zIndex: 20,
                }}
                clearOnFocus={false}
                closeOnBlur={true}
                textInputProps={{
                  placeholder: 'Enter Exercise',
                  style: {
                    color: 'white',
                    fontWeight: 'bold',
                  },
                  placeholderTextColor: 'white',
                }} // or just '2'
                ItemSeparatorComponent={<View style={{ height: 0 }} />}

                suggestionsListTextStyle={{ color: 'black' }}
                suggestionsListMaxHeight={135}
                onOpenSuggestionsList={() => {
                  suggestionOpened();
                }}
                onSelectItem={item => {
                  item && changePic(item.pic);
                  setSearching(false);
                }}
                onChangeText={item => {
                  item && getData(item);
                }}
                showClear={false}
                dataSet={dataSet}
              />

Screenshot:

Is there a way to prevent the dropdown from opening onFocus? I need it to only open when the user enters a search term.

Is there any way to prevent showing warning with no suggestions?

Hi, I found this addon a few days ago and I've been using it in my project, but for some reason the suggestions list is not scrollable for me when using android (works fine for ios though). I've tried a lot of things that have worked for others but so far none of them has worked for me. Is there a fix for this? Thanks in advance.

I'm not really sure if you're supporting this for web, but I've had pretty good luck with it the only issue seems to be when I set closeOnBlur to true, the actual value never gets set when you select it from the dropdown. Weirdly it does work if you select it by clicking on the chevron to initiate the dropdown.

The title says it all the typescript definitions doesnt include the renderItem & inputHeight prop

Hello Everyone I need to disabled the keyboard opening when i click on the autocomplete textInput as in my situation I got some few value in the dropdown list.

When closeOnBlur is set to true, and an attempt to scroll between suggestions is made, it closes.

Hi,
First Thanks for this Amazing Package works great

But May i know how can i show 2 DropDown

My Code

<View style={{flex:1}}>
      <DropDown />
       <DropDown />
</View>

Hi, as i see at the moment, we need to press twice to select item and close the dropdown. I guess this happens because we are focused in the input. Is there a way to avoid this, and select the item and close dropdown from 1 press?

I'm not talking about initial value, I'm talking about how to manually set the value in the search bar? Like how can I change the text in the search bar based on the state, but not onSelect or onChangeText?

Hi! Thank you so much for creating this package, I am really enjoying it and it works really well.

I thought it would be nice to have a onClose/onBlur prop that receives a function that runs whenever the focus goes to another component, or when the user is done with the input.

If I put it inside a then the drop-down list is messed up.

Hello,

I implemented the following code, but my suggestion list is not scrolling. What could be wrong?

<AutocompleteDropdown
debounce={600}
emptyResultText={'Nenhum item encontrado.'}
clearOnFocus={true}
closeOnBlur={true}
closeOnSubmit={false}
useFilter={false}
showChevron={false}
loading={loading}
dataSet={clientesList}
onChangeText={handleOnChangeText}
onClear={handleOnClearPress}
onSelectItem={item => {
item && setSelectedItem(item.id);
}}
renderItem={(item, text) => (
<Text style={{padding: 15}}>{item.title}
)}
inputHeight={45}
suggestionsListMaxHeight={Dimensions.get('window').height * 0.4}
textInputProps={{
placeholder: 'Digite 3 caracteres ou mais...',
autoCorrect: false,
autoCapitalize: 'none',
style: {
borderRadius: 15,
backgroundColor: theme.gray[100],
color: theme.gray[500],
paddingLeft: 10,
},
}}
inputContainerStyle={{
backgroundColor: theme.gray[100],
borderRadius: 15,
}}
/>