nativebase autocomplete Unable to find - react-native

Question

I'm new to React Native & I'm using NativeBase to build my demo app. I'm not able to create AutoComplete Searchbox using nativebase. Can anyone help me to give any example? My Requirement:
1. Rounded Search Box
2. Once Click it should show cancel button
3. After typing 2 letter it should give provide option to user for select
4. Select the option.
I searched in Google. However unable to find anything which suffice my requirement. Can anyone please help.

Answer 1

for your exact requirement you can write your own code. I tried to write autocomplete functionality. You can check in Expo.
This is basic code for react-native autocomplete functionality.
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from 'react-native';
export default class AutoCompleteBasics extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
textInputFocus: false,
arrayList: ['Apple', 'Mango', 'Guava', 'Muskmelon', 'Watermelon', 'Orange', 'Sapota']
};
}
componentDidMount() {
this.updateDataWithKey();
}
updateDataWithKey() {
const { arrayList } = this.state;
const dataWithKey = arrayList.map(data => {
return {'key': data}
});
this.setState({dataWithKey, filterData: dataWithKey});
}
changeText(text) {
this.setState({text});
const { dataWithKey } = this.state;
if (text !== '') {
let filterData = dataWithKey.filter(obj => {
return obj.key.toLowerCase().indexOf(text.trim().toLowerCase()) > -1;
});
if (filterData.length === 0) {
filterData = [{key: 'No Filter Data'}];
}
this.setState({filterData});
} else {
this.setState({filterData: dataWithKey});
}
}
onListItemClicked(text) {
this.setState({
text,
textInputFocus: false,
filterData: [{key: text}]
});
}
renderRow(item) {
return (
<TouchableOpacity
onPress={() => this.onListItemClicked(item.key)}
style={styles.listItem}
>
<Text style={styles.item}>{item.key}</Text>
</TouchableOpacity>
);
}
handleInputFocus() {
this.setState({textInputFocus: true});
}
handleInputBlur() {
this.setState({textInputFocus: false});
}
render() {
const { filterData, textInputFocus } = this.state;
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
onFocus={() => this.handleInputFocus()}
onBlur={() => this.handleInputBlur()}
placeholder="Search & Select List!"
onChangeText={(text) => this.changeText(text)}
value={this.state.text}
/>
{textInputFocus &&
<FlatList
data={filterData}
renderItem={({item}) => this.renderRow(item)}
/>
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 8,
paddingTop: 12
},
textInput: {
height: 40,
marginLeft: 5,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})

Answer 2

you may use native-base-autocomplete the api is taken from react-native-auto-complete. check out snack example of how to use it.