Autocomplete input with dropdown modal component for React native. Useful for pages with multiple autocomplete's.

License: MIT License

JavaScript 100.00%

dropdown autocomplete react-native react-native-modal react-native-dropdown

react-native-dropdown-autocomplete's People

Contributors

Stargazers

Watchers

react-native-dropdown-autocomplete's Issues

User Input

How can I get the user input text? I can't find that.

Error: Error: There was an error fetching your data

Hi,

I am using your package and so happy it's working. But when i changed the value of fetchDataUrl, like this:

<Autocomplete
style={styles.input}
scrollToInput={ev => {}}
handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
onDropdownClose={() => {}}
onDropdownShow={() => {}}
fetchDataUrl={this.state.people}
minimumCharactersCount={1}
highlightText
valueExtractor={item => item.name}
rightContent
rightTextExtractor={item => item.id}
/>
the warning show

this is the function to get people from my api
async function getPeopleFromServer(){
try{
let response = await fetch('http://localhost:3000/people/all');
let responseJson = response.json();
return responseJson;
} catch(error){
console.log('Error is: ', error);
}
}

my state people contains like below

[ { id: '123a', name: 'James' },
{ id: 456'b', name: 'George' },
{ id: '789c', name: 'Edward' },
{ id: '00d', name: 'Jhon' } ]

Do you know what happen? I am so pleasure for your help.

dropdown list on the side of the input ?

Hey Guys,
This package is great and easily customizable, that's great but I need a little help, please.
When I have the suggestion list, the style of my input is wierd, I don't know how to fix this, I'd like the input to stay the same and the suggestion to go down... :

https://zupimages.net/up/20/11/0xqc.bmp

the code :

<SafeAreaView
                style={{
                  flexDirection: "row",
                  marginVertical: 10,
                  marginHorizontal: 20
                }}
              >
                {autocompletes.map(() => (
                  <Autocomplete
                    key={shortid.generate()}
                    containerStyle={{}}
                    inputStyle={{
                      borderColor: "#fff",
                      width: 250,
                      fontFamily: "FunctionLH"
                    }}
                    placeholder={i18n.t("tripsform.action.departure")}
                    placeholderColor="#FFF"
                    scrollToInput={ev => {}}
                    handleSelectItem={(item, id) =>
                      this.handleSelectItem(item, id)
                    }
                    // onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    pickerStyle={{ backgroundColor: "transparent" }}
                    fetchDataUrl={apiUrl}
                    minimumCharactersCount={2}
                    highlightText
                    valueExtractor={item => item.name}
                    rightContent
                    rightTextExtractor={item => item.properties}
                  />
                ))}
                <DatePicker
                  date={this.state.datetimeS}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  hideText={true}
                  showIcon={true}
                  onDateChange={datetime => {
                    this.setState({ datetimeS: datetime });
                  }}
                />
              </SafeAreaView>
              <SafeAreaView
                style={{
                  flexDirection: "row",
                  marginVertical: 10,
                  marginHorizontal: 20
                }}
              >
                {autocompletes.map(() => (
                  <Autocomplete
                    key={shortid.generate()}
                    containerStyle={{}}
                    inputStyle={{
                      borderColor: "#fff",
                      width: 250,
                      fontFamily: "FunctionLH"
                    }}
                    placeholder={i18n.t("tripsform.action.arrival")}
                    placeholderColor="#FFF"
                    scrollToInput={ev => {}}
                    handleSelectItem={(item, id) =>
                      this.handleSelectItem(item, id)
                    }
                    onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    pickerStyle={{ backgroundColor: "transparent" }}
                    fetchDataUrl={apiUrl}
                    minimumCharactersCount={2}
                    highlightText
                    valueExtractor={item => item.name}
                    rightContent
                    rightTextExtractor={item => item.properties}
                  />
                ))}
                <DatePicker
                  date={this.state.datetimeA}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm"
                  hideText={true}
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  showIcon={true}
                  onDateChange={datetime => {
                    this.setState({ datetimeA: datetime });
                  }}
                />
              </SafeAreaView>

scrollToInput is not a function

Hello,

I am using your package, but it is giving me the following error when I clicked on the input field attached capture:

so the error indicates is by this line of code:

scrollToInput: Focus on selected field
What other method can I use to write in the input field? because as you can see when I click on that field it gives the error

I appreciate your help
regards

onBlur is called before onPress on Menuitem

I installed the latest react-native-dropdown-autocomplete package and used the component as documented. When trying to select an item in the dropdown, the onBlur on the TextInput component gets called before the onPress on the Button component on Android. This closes the dropdown without selecting any value.

If I disable the this.dropdown.current.close(); in the handleBlur the items gets selected correctly but of course navigating out of the TextInput component without selecting a value will not close the dropdown.

Prop data doesn't exists on AutocompleteProps interface

According to the docs, it's possible to pass the data directly, without using the fetchData prop

But the AutocompleteProps interface doesn't have the data prop type

Add value attribute

Add value attribute so we can set the value, right now there is only initialValue.

Also please pass the item to these functions:

onDropdownClose={() => ()}
onDropdownShow={() =>()}
renderIcon={() => ()}

handleItemSelect prop doesn't get called in Android

Working fine in iOS but the function I pass into the handleItemSelect prop doesn't get evoked

handleSelectItem={(item, id) => this._handleSelectItem(item, id)}

[question] Is it possible to use with fixed content

I'd like to use the module with a fixed array, without calling any api.

Is it possible?

How to handle “onDropdownClose” ?

Hello,
I'm a little lost with onDropDownClose
The purpose of this screen is to allow me to choose a product in an autocomplete input, when I have chosen it, I authorize the user to access the camera in order to scan the product in question.
I have an autocomplete input in which I chose the name of the product (here in the example it will be the name of a flight, but it's for testing, whatever).

I have the error

"onDropdownClose is not a function. (In 'onDropdownClose ()','onDropdownClose' is undefined)"

and I don't know how to handle it.

If the product is selected, I want that when the dropdown is closed, this.state.eventSelected becomes true but how to manage this with onDropDownClose?

I'm a little lost in my code and I'm going to need some explanation. Thank you if you have time for me to help me. In any case, thank you for reading me.

    class Tickets extends Component {
      constructor(props) {
        super(props);
        this.state = {
          Press: false,
          hasCameraPermission: null,
          reference: '',
          name:'',
          lastScannedUrl:null,
          eventSelected: false, 
          displayArray: []      
        };
      }
    
       initListData = async () => {
        let list = await getProducts(1);
       
        if (list) {
          this.setState({
            displayArray: list,
            reference: list.reference,
            name: list.name
          });      
        }
       // console.log('name dans initListData =', list.name)
       // console.log('reference dans initListData =', list.reference)
      };
    
       async UNSAFE_componentWillMount() {
        this.initListData();
      };
    
      componentDidMount() {
        this.getPermissionsAsync();    
      }
    
      getPermissionsAsync = async () => {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === "granted" });
      };
    
      handleBarCodeScanned = ({ type, data }) => {
        this.setState({ Press: false, scanned: true, name: data });
        this.props.navigation.navigate('ProductDetails', {name : parseInt(this.state.state.name)})
      };
    
      renderBarcodeReader = () => {
        const { hasCameraPermission, scanned } = this.state;
    
        if (hasCameraPermission === null) {
          return <Text>{i18n.t("scan.request")}</Text>;
        }
        if (hasCameraPermission === false) {
          return <Text>{i18n.t("scan.noaccess")}</Text>;
        }
        return (
          <View
            style={{
              flex: 1,
              ...StyleSheet.absoluteFillObject
            }}
          >   
          <Camera
            onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
            barCodeScannerSettings={[Camera.Constants.Type.qr]}
            style={{flex:1}}
          />
            {scanned && (
              <Button
                title={"Tap to Scan Again"}
                onPress={() => this.setState({ scanned: false })}
                disabled={this.state.selectedItem===null}
              />
            )}    
          </View>
        );
      }
      handleSelectItem(item, index) {
        const {onDropdownClose} = this.props;
        onDropdownClose();
    
        this.setState({eventSelected: true})
        //console.log(item);
      }
      render() {
        const { hasCameraPermission, scanned, Press } = this.state;
        let marker = null;
    
        const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;
    
    // console.log('displayArray', this.state.displayArray,)
    // console.log('this.state retourne', this.state)
        return (
          <View style={{flex:1}}>         
            <View style={{width: "100%", zIndex: 100}}>                         
              <Autocomplete
                key={shortid.generate()}
                containerStyle={{margin: 0, padding: 0, borderBottomColor: 'transparent',}}
                inputStyle={{ width: '80%', borderWidth: 1, backgroundColor: '#FFF', opacity: 0.9, borderColor: '#F78400'}}
                placeholder={i18n.t("tickets.event")}
                placeholderColor="#F78400"
                pickerStyle={styles.autocompletePicker}
                scrollStyle={styles.autocompleteScroll}
                scrollToInput={ev => {}}
                handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
                onDropdownClose={() => onDropdownClose()}
                onDropdownShow={() => onDropdownShow()}              
                data={this.state.displayArray}
                minimumCharactersCount={2}
                highlightText
                valueExtractor={item => item.name}
                rightContent
                rightTextExtractor={item => item.properties}
              />          
            </View>
            {this.state.eventSelected ? (
              <View>
              {this.renderBarcodeReader()}
              </View>
              ) : (
              <Text style={{ top: '33%', zIndex:100, color: 'red', fontStyle: 'italic', fontSize: 18}}>{i18n.t("tickets.warning")}</Text>
                )}
          </View>
        );
      }
    }
    export default Tickets;

How can I make a select field change automatically when you select an option from the search

Hello! I am trying to do the same thing you see in the attached gif but in an application with RN.

I have the search done with this package but I don't know how I can make the type field select (with placeholder "Seleccione") change automatically as in the gif when you select an option from the search? Do you have any idea how to do it?

Scroll inside search field doesn't work

Hi! I am using your package for the next field attached capture:

I think I have a conflict with the scrolls, because inside that search field I have a scroll which does not work (only in Android because in iOS work well), and outside the search field in the view I have another scroll which does work well in both (ios and android). How can I make the scroll work within the search field in android?

My code:

<View style={baseStyles.autocompletesContainer}>
                  <SafeAreaView>
                    <Autocomplete
                      key={shortid.generate()}
                      style={baseStyles.input}
                      scrollToInput={ev => {}}
                      inputContainerStyle={baseStyles.input1}
                      inputStyle={baseStyles.input1}
                      scrollStyle={baseStyles.input2}
                      handleSelectItem={(item, index) => {
                        if (item.tipo_identificacion == 999) {
                          this.setTipoIdentificacion(item.tipo_identificacion);
                          this.setNacimiento(item.fecha_nacimiento);
                          this.setNombre(item.nombre);
                          this.setApellido(item.apellido);
                          this.setTelefono(item.celular);
                          this.setcorreo(item.email);
                        } else {
                          this.setNombre(item.nombre);
                          this.setApellido(item.apellido);
                          this.setTelefono(item.celular);
                          this.setCedula(item.cedula);
                          this.setcorreo(item.email);
                          this.setTipoIdentificacion(item.tipo_identificacion);
                          this.clickhandler();
                          this.clickhandler2();
                        }
                        console.log('item', item);
                      }}
                      onDropdownClose={() => {}}
                      onDropdownShow={() => {}}
                      minimumCharactersCount={1}
                      highlightText
                      valueExtractor={item =>
                        `${item.cedula} ${item.nombre} ${item.apellido}`
                      } //item.nombre || `${item.nombre} ${item.apellido}` || item.cedula}          //{item =>`${item.cedula}${item.nombre}${item.apellido}`}
                      rightContent
                      rightTextExtractor={item => item.properties}
                      placeholder="Por nombre o cédula"
                      fetchData={async searchTerm => {
                        //console.log(fetchData);
                        const response = await fetch(
                          this.props.loggedUser.pais +
                            `/api/buscarpacienteL?paciente=${searchTerm}${'&doctorid='}
                      ${this.props.loggedUser.user_id}`,
                        );
                        return await response.json();
                      }}
                    />
                  </SafeAreaView>
                </View>

Regards

Basic version not rendering as expected

When I installed the library and used the following code, it renders very tall, fills my whole app height and although the spinner appears no results show.

Do you need to have specific styling set in order to get this to work?
Thanks

<Autocomplete
      data={cities}
      handleSelectItem={(item, id) => handleSelectItem(item, id)}
      valueExtractor={item => item.city}
      style={{maxHeight: 40}}
/>

Blank keyboard appears after suggestions popup.

Hi
I am having the issue with keyboard on android.
Blank keyboard is showing.

<SafeAreaView>
            {autocompletes.map(() => (
              <Autocomplete
                key={shortid.generate()}
                style={styles.input}
                placeholder={name}
                
                inputStyle={{color:"white"}}
               
                scrollToInput={ev => scrollToInput(ev)}
                handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
                onDropdownClose={() =>{ 
                
                  onDropdownClose()
                  }}
                onDropdownShow={() =>{ 
                 
                  onDropdownShow()}}
             
                noDataText={name}
                data={communities}
                minimumCharactersCount={0}
                highlightText
                valueExtractor={item => item}
                rightContent
                rightTextExtractor={item => item.properties}
              />

Possibility to reset the input in handleSelectItem

Hello there, is it possible to reset the input in handleSelectItem.
if we want to choose multiple item from the same dropdown, we have to erase it manually and each time it triggers the search,

How to use with GraphQL API?

the component takes in data url how can we use it with a graphql api like we would want to call a query function and use its loading state for the spinner.

use react-native-dropdown-autocomplete in flatlist

It's was crash when use in Flatlist with error undefine is not function(ner '...this._scrollRef.scrollTo...')
Help me please.

List should show on focus of Autocomplete input field

When click on input field and don't type anything then complete list should show. If this feature is already exist then please show that code.

Can't tap on dropdown items on Android

On iOS this works fine, but on Android the keyboard just disappears without selecting the item.

Likely something with keyboardShouldPersistTaps isn't working right on Android.

send header information with api request

i want to send X-Access-Token in header. how to do that?

test

Pass the state of the autocomplete field to API

Hello,
I need to consume an api and pass the state of the autocomplete field, that is, this is my api https://www.mydomain.com/api/searchuserL?email= after the = it should receive the letters that I write in the autocomplete field eg. https://www.mydomain.com/api/searchuserL?email=searchterm
Is it possible to do it with this library? I try using the onChangeText = {(text) => this.setState ({text})} to save the value and pass it to the api but when I use it it simply does not allow writing in autocomplete field?

Is there any way I can make this requirement?

Regards

onDropdownShow doesn't work Android and Web.

onDropdownShow - works only in IOS.
onDropdownClose works fine.
Snack - https://snack.expo.io/@lovetofail/dropdown

Is it this line?

react-native-dropdown-autocomplete/components/Dropdown/index.js

Line 146 in 814615e

if (this.mounted && Platform.OS === "ios") {

Input loses focus after dropdown appears

Currently after search, it shows the result list, but loses the focus on the input.

Is there a solution to focus the selected input after search or to pass down a ref prop?

not showing list item

react native dropdown autocomplete not showing item when in reactnativemodal

OnChangeText clears the input when using useState hook

Updating local state through onChangeText, clears the input anytime I type.

 const [item, setItem] = useState("")

<Autocomplete
    key={uuidv4()}
    inputStyle={styles.inputContainer}
    placeholder="building"
    onChangeText={text => setItem(text)} // <-- This is not working
    handleSelectItem={(item, id) => console.log(item, id)}
    data={items}
    minimumCharactersCount={2}
    valueExtractor={item => item}
  />

Problem in RN 0.60.4

Hi, When I want to use your library in RN 0.60.4 show me error that listview has been removed from react native. what can I do now?
Thanks

Update initial Data

I need to update the initial data that i set in the autocomplete. The idea is to have a dynamic data for my autocomplete, it is this posible? There are a PR for update data that could be useful. Someone can merge it ??

How do we hide the suggestion list(dropdown flatlist) when we erase all the text?

I would like to hide the suggestion list when I erase all the text.
how can I do that please?
Thank you

autocomplete drop down not working when data get using the state

hello, i am implement this library in my project and call my project api and get the data and set data in state and update the state but the problem is that when i give the data in the autocomplete in data attribute and when run the project then that time autocomplete not suggest the drop down. and not show the result but when i use the static array and after i apply then that time complete work. so please give me solutions.

here is my code----------------

import React, { Component } from 'react';
import { View, StyleSheet, SafeAreaView, AsyncStorage } from 'react-native';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";

class demoDropDown extends Component {

constructor(props) {
    super(props);

    this.state = {
        stateList: []
    }

    this.container = React.createRef();
    this.handleChangeInput = this.handleChangeInput.bind(this);
}

componentDidMount = async () => {
    console.log("call componentDidMount");
    this.callCityApi();
}

callCityApi = async () => {
    console.log("call callCityApi");
    var apiUrl = 'MY API URL';

    var data = JSON.stringify({
        'authToken': 'UJTOBB'
    })

    // call ws
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            // Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: data,
    }).then((response) => {
        if (response.status === 200) {
            return response.json().then((responseData => {
                //  console.log("responsedata::" + JSON.stringify(responseData));   
                if (responseData.header.Status === 706) {
                    alert("706 ::+" + JSON.stringify(responseData));
                }
                else if (responseData.header.Status === 200) {
                    var stateListData = responseData.Data.CityList;
                    // console.log("stateListData::" + JSON.stringify(stateListData));   
                    console.log("stateListData ::" + stateListData.length);

                    AsyncStorage.setItem('stateListData', JSON.stringify(stateListData));

                    this.autoCompleteDropDown();
                }
                else {
                    alert("Other ::+" + JSON.stringify(responseData));
                }
            }))
        }
        else {
            alert("There is something wrong, please try again later, error code: " + response.status)
        }

    })
}

autoCompleteDropDown = () => {
    AsyncStorage.getItem('stateListData').then
        ((value) => {
            
            //console.log("Get value from async storage ::"+value);
            
            this.setState({
                stateList: value
            })
        })
}

handleChangeInput() {
  //console.log("on change text ::"+data);
}

handleSelectItem(item) {
    const { onDropdownClose } = this.props;
    onDropdownClose();
    console.log(item);
}

render() {
    console.log("call render");
    //console.log("stateList ::" + this.state.stateList);
    const { scrollToInput, onDropdownClose, onDropdownShow } = this.props;

    const data = this.state.stateList;
    
    return (
        <View style={styles.autocompletesContainer}>
            <SafeAreaView>
                <Autocomplete
                    ref={ref => {
                        this.container = ref;
                    }}
                    data={data}
                    inputContainerStyle={styles.inputContainer}
                    style={styles.input}
                    scrollToInput={ev => scrollToInput(ev)}
                    handleSelectItem={(item) => this.handleSelectItem(item)}
                    onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    minimumCharactersCount={1}
                    onChangeText={() => this.handleChangeInput()}
                    highlightText
                    valueExtractor={item => item}
                />
            </SafeAreaView>
        </View>
    )
}

}

export default withKeyboardAwareScrollView(demoDropDown);

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,
},
});

Mixed used of ref callback and React.createRef

I'm playing with the master branch and it looks like the this.dropdown parameter is always null.

Also it gets value 2 times, once in the constructor this.dropdown = React.createRef(); and once in the ref callback:

ref={ref => { this.dropdown = ref; }}

Is that intentional?

Update Gif / The list doesn't float over other components

Thanks for this great library.
I tried the demo (by copy and paste) but can't make it works as expected, the list filled the space when it displayed.
Reproduce: https://snack.expo.io/@bkdev/rnda-issue-33

react-native: 0.59.10
expo: 35.0.0
react-native-dropdown-autocomplete: ^1.0.17

selection of item

How could I do that when I click and select a card with another api I automatically load the name, surname, telephone data.

<Autocomplete
   key={shortid.generate()}
   style={baseStyles.input}
   scrollToInput={ev => { }}
   handleSelectItem={(item, index) => {}}
   onDropdownClose={() => { }}
   onDropdownShow={() => { }}
   minimumCharactersCount={1}
   highlightText
   valueExtractor={item => item.cedula) }
   rightContent
   rightTextExtractor={item => item.properties}
   placeholder="cedula"
   fetchData={async (cedula) => {
       const response = await fetch(`https://www.basedx.com/api/buscarcedula? 
       ced=${cedula}`);
       return await response.json();
     }
/>

how can I pass the other api so that by selecting I fill in the fields. api

    fetchData={async (cedula) => {
                        const response = await fetch(`https://www.basedx.com/api/usercedula? 
                        user=${cedula}`);
           var dataCed = await response.json();
            return dataCed.map(x => { (item.first_name || item.las_tname || item.telefono) });

example the api returns me

{
  user: {
    first_name: "carmen",
    last_name: "montoya",
    telefono: 0
  },
  success: true

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

Thanks for the work on this!

Getting this warning -

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

Move data fetching code or side effects to componentDidUpdate.

If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: KeyboardAwareScrollView

node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5864:19 in printWarning

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5892:25 in lowPriorityWarning

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:6135:8 in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20377:6 in flushRenderPhaseStrictModeWarningsInDEV

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19606:41 in commitRootImpl

[native code]:null in commitRootImpl

node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19590:4 in commitRoot

[native code]:null in commitRoot

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback

[native code]:null in runRootCallback

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1

node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2709:30 in batchedUpdates

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0

node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2870:28 in receiveTouches

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard

node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0

[native code]:null in callFunctionReturnFlushedQueue

handleSelectItem not being called.

Hi there,

The callback on selection doesn't seem to be firing for me. I've replaced the function with a simple console.log which is not being called also. Just wondering if you might be able to shed some light as to why? Thanks.

<Autocomplete
    data={data}
    handleSelectItem={(item, index) => console.log('CAN YOU HEAR ME')}
    minimumCharactersCount={1}
    highlightText
    valueExtractor={item => item.name}
    rightContent
    rightTextExtractor={item => item.code}
    initialValue={this.props.college}
    placeholder="e.g Trinity College Dublin"
    spinnerColor="#E14ED2"
    highLightColor="#E14ED2"
    noDataText="Invalid College/University"
    inputStyle={styles.input}
    containerStyle={styles.dropdownContainer}
    scrollStyle={styles.dropdownContainer}
/>

Update react-native-keyboard-aware-scroll-view to 0.9.2+?

I see a blank page in expo 39 (react-native 0.63) due to undefined component warning here

react-native-dropdown-autocomplete/components/withKeyboardAwareScrollView/index.js

Line 70 in ab48f1e

<KeyboardAwareScrollView

All works well when i force react-native-keyboard-aware-scroll-view dependency to 0.9.2+

Thanks!

set default value

How i can set default value for text input without focus, i want to show by default current location address when enter in screen, but i didnt see any props to set default value for text input.

Style can't change

Hi, i want to change style of dropdown autocomplete. But it's still same like default. Do you know what's wrong?

Consult API by condition

Hi there! I need to consult two api within each condition that I have in the autocomplete, but it doesn't take the second one, I worked the api out of autocomplete and in the handleSelectItem = {(item, index) => {this.state.user}} I passed the state of the api but I need to check another api, that is, two api for each condition? how would it be done?

  fetchDatasearch = async () => {
    const response = await fetch(
      `https://www.mydomain.com/api/searchuserL?email=${searchTerm}`
    );
    const search = await response.json();
    console.log("search.user", search.user);
    this.setState({ user: search.user });
       name.setText(Name);
       lastname.setText(LastName);
       telephone.setText(telephone);
    
    //console.log("user", this.state.user); 
  };
   componentDidMount() {
    this.fetchDatasearch();
    
   }
   
    <Autocomplete
                    key={shortid.generate()}
                    style={baseStyles.input}
                    scrollToInput={ev => { }}
                    handleSelectItem={(item, index) => {this.state.user}}
                    onDropdownClose={() => { }}
                    onDropdownShow={() => { }}
                    minimumCharactersCount={1}
                    highlightText
                    valueExtractor={item => item.email || ( item.name||item.lastname)}
                    rightContent
                    rightTextExtractor={item => item.properties}
                    placeholder={this.state.checked ? 'Email' : 'Search by Name, LastName'}
                    fetchData={async (searchTerm) => {
                      
                      if (this.state.checked == 1) {
                          const response = await fetch( `https://www.mydomain.com/api/searchuserL?email=${searchTerm}`);
                        return await response.json();
                      /*if (response == true)
                          const response2 = await fetch( `https://www.mydomain.com/api/searchuser?email=${searchTerm}`);
                          return await response2.json();
                          name.setText(Name);
                          lastname.setText(LastName);
                          telephone.setText(telephone);*/
                        
                      } else {
                        const response = await fetch(`https://mydomain.com/api/searchpatientL?patient=${searchTerm}`);
                        return await response.json();
                      }

Clarification: Did autocomplete show the suggested list if the search words contains in a string

[1]
I have a clarification about the Autocomplete. Here I need to know does the AutoComplete will show the search letters related words.

For Eg,) Lake JesusMouth and Lake Noemie have o and e letter. If I search O or e as first does it show these words which I mentioned?

Also, Here If I type Lake means it listing all names started with Lake. It is fine but If I type a letter means does it show any result?

https://snack.expo.io/@niph/dropdown

[2]

Can we able to create tags using this. (i.e) If I need to show the selectedDropdown value as a tag above the input box means is it possible by using this package.

react-native-webview take much time to load the url

Use two api within the same autocomplete

Hi there! with your package, can I use two api within the same autocomplete?

api for search by name: https://www.mydomain.com/api/searchuserL?name=${searchTerm}
api for search by email: https://www.mydomain.com/api/searchuserL?email=${searchTerm}

as I apply it in the following code:

metodochecked() {
    if (this.state.cheked = true)
      return fetchData
    else 
      return fetchData2     
  }
  
    <Autocomplete
                  key={shortid.generate()}
                  style={baseStyles.input}
                    scrollToInput={ev=> { }}
                    handleSelectItem={(item, index) => {}}  
                    onDropdownClose={() => { }}
                    onDropdownShow={() => { }}
                    minimumCharactersCount={0}
                    highlightText
                    valueExtractor={item => item.email}
                    rightContent
                    rightTextExtractor={item => item.properties}
                    fetchData={async (searchTerm) => {
                    const response = await fetch(``https://www.mydomain.com/api/searchuserL?name=${searchTerm}`);
                    return await response.json();
                    }}
                    fetchData2={async (searchTerm) => {
                    const response = await fetch(``https://www.mydomain.com/api/searchuserL?email=${searchTerm}`);
                    return await response.json();
                    }}
                  />

and can I call inside the autocomplete that "metodochecked" that you see there? What I want to do is something like you see in the following image that I change the field if I press the checkbox

how to get the suggestions by the first letter?

how to get the suggestions by the first letter.
for example, when I enter the letter A I would like to have suggestions that start with A.
(Australia, Austria, Argentina, Armenia ......) ----> A
or the S
(Serbia, Slovakia, Slovenia, Switzerland .....) ------> S
but the component displays me the suggestions that contain the letter A.
(German, Australia, Austria, Italy, France, Japan, Netherlands ......).
how could we do that.
Thanks

always return _scrollinput is not function ?

Update dependency react-native-keyboard-aware-scroll-view

Please, update dependency react-native-keyboard-aware-scroll-view. My app doesn't compile to web until I update react-native-keyboard-aware-scroll-view manually to 0.9.1.
The error is "Attempted import error: 'react-native-web/dist/index' does not contain a default export (imported as 'ReactNative')."

APSL/react-native-keyboard-aware-scroll-view#365

autofocus on load

is it possible to auto focus autocomplete input on load?

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

react-native-dropdown-autocomplete's People

Contributors

Stargazers

Watchers

Forkers

react-native-dropdown-autocomplete's Issues

Recommend Projects

Recommend Topics

Recommend Org