onChangeText never fires

I am trying to make an autocomplete to select a geographic area from the api. onChangeText should trigger a query to search the location, and then the result should update the view. but the event never fires. I am using native base and mobx

<Item floatingLabel >
    <Label>Location</Label>
    <View style={autocompleteStyles} elevation={1}>
        <Autocomplete
            data={this.props.store.profileLocationResults.toJS()}
            defaultValue={this.state.query}
            onChangeText={text =>{
                console.log('location autocomplete text changed %s',text);
                this.setState({ query: text });
                this.props.store.autocompleteProfileLocation(text);
            }}
            renderTextInput={(props)=><Input {...props} />}
            renderItem={item => (
                <TouchableOpacity onPress={() => this.setState({ query: item.displayname, location: item._id })}>
                    <Text>{item}</Text>
                </TouchableOpacity>
            )}
        />
    </View>
</Item>

[bhaskardabhi]

I think issuer didn’t give enough detail. I am facing the same issue. Whenever I use <Item> of Nativebase was the wrapper for Autocomplete then it brakes.

In mycase, I am using <Item regular> it works fine with onChangeText but breaks with renderItem method’s onPress event never get fired.

Pasting my code below:

Autocomplete:

import React, { Component } from 'react';
import { ListItem, Text } from 'native-base';
import Autocomplete from 'react-native-autocomplete-input';

class AutoComplete extends Component {

    state = {
        query: '',
        open: true
    };

    _filterData = (queryClient) => {
        if (queryClient === '') {
            return [];
        }

        const regex = new RegExp(`${queryClient.trim()}`, 'i');

        return this.props.data.filter(sportTask => sportTask[this.props.text].search(regex) >= 0);
    };

    onSelected = (item) => {
        this.setState({ query: item[this.props.text], open: false});
        this.props.onSelected(item);
    };

    onChange = (text) => {
        this.setState({ query: text, open: true });
        this.props.onChange(text);
    };

    render() {
        const data = this._filterData(this.state.query);

        let comp = (a, b) => b && a.toLowerCase().trim() === b.toLowerCase().trim();

        return (
            <Autocomplete
                autoCapitalize="none"
                autoCorrect={false}
                containerStyle={{ 
                    zIndex: 800
                }}
                listStyle={{ 
                    zIndex: 999, 
                    fontSize: 14, 
                    backgroundColor: 'white',
                    borderColor: 'grey',
                    borderTopWidth: 0,
                    borderBottomWidth: 1,
                    borderLeftWidth: 1,
                    borderRightWidth: 1
                }}
                placeholder="Select Goal"
                hideResults={!this.state.open}
                onChangeText={text => this.onChange(text)}
                placeholderTextColor="#bfc6ea"
                style={{fontSize: 14}}
                inputContainerStyle={{width: '100%', height: 40, fontSize: 14, paddingLeft: 10, borderWidth: 0 }}
                data={data.length === 1 && comp(this.state.query, data[0].nombre) ? [] : data}
                defaultValue={this.state.query}
                renderItem={item => (
                    <ListItem key={item[this.props.id]} onPress={() => this.onSelected(item)}>
                        <Text style={{fontSize: 14}}>{item[this.props.text]}</Text>
                    </ListItem>
                )}
            />
        );
    }
}

export default AutoComplete;

Using AutoComplete in my project:

import React, { Component } from 'react';
import { Content, ListItem, Item, Input, Picker, Textarea, Icon, Card, CardItem, Body, View, Button, Text } from 'native-base';
import { Task } from "./../Services/Task";
import Reactotron from 'reactotron-react-native';
import { Linking, Switch, StyleSheet } from 'react-native'
import AutoComplete from './AutoComplete';

class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: null,
            tasks: []
        };

    }

    componentDidMount() {
        var that = this;
        Task.getAll().then(function (tasks) {
            that.setState({ tasks: tasks });
        });
    }

    handleTaskChange(id) {
        this.setState({id: id});
    }

    render() {
        const itemStyle = {
            zIndex: 1,
            marginBottom: 8,
            borderWidth: 1,
            width: '100%',
            borderRadius: 8
        };

        const autoCompleteItemStyle = {
            ...itemStyle
        };

        return (
            <Content padder> 
                <View style={{height: 300}}>
                    <Item style={autoCompleteItemStyle} regular>
                        <AutoCompleteTest
                            data={this.state.tasks}
                            id='id' text='name'
                            onSelected={(item) => this.handleTaskChange(item.id)}
                            onChange={(item) => this.handleTaskChange(null)} />
                    </Item>
                </View>
            </Content>
        );
    }
}

export default Test;

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.