React Native Search Dropdown

Question

I'm working on React native app. I'm looking for a searchable dropdown which I need to implement in many places.

Below see below video for reference:

Sample Video

I have implemented below third parties but they are not same as I need:

1. https://www.npmjs.com/package/react-native-searchable-dropdown

2. https://www.npmjs.com/package/react-native-searchable-selectbox

3. https://github.com/toystars/react-native-multiple-select

Answer 1

I tried implementing something similar a while ago and at the time I dropped the idea of having a drop down as it was inconsistent on both platforms & I could not find a perfect solution. I cannot see your video but I think I know where you're going with this. Here is my advice: I would create a separate screen that opens on the tap on this component that would be a 'dropdown', and in there create a searchable/filtrable list. You could try doing that using this: https://www.npmjs.com/package/searchable-flatlist, or create your own flatlist, which is super easy and allows for more customization! EDIT: If you don't want a separate screen use this: https://www.npmjs.com/package/react-native-searchable-dropdown

Answer 2

try implementing one :

const sports = ["Badminton","Cricket","Chess","Kho-Kho","Kabbadi","Hockey","Boxing","Football","Basketball","Volleyball","Tennis","Table Tennis"];

predict(){
    let q = this.state.query;
    let arr = sports.filter(ele => ele.toLowerCase().indexOf(q.toLowerCase()) != -1).splice(0,5);
    this.setState((prev = this.state)=>{
        let obj={};
        Object.assign(obj,prev);
        obj.predictions.splice(0,obj.predictions.length);
        arr.forEach(ele=>{
            obj.predictions.push({key : ele});
        });
        return obj;
    });
}

<TouchableWithoutFeedback onPress={()=>{this.setState({done : true})}}>
                <ScrollView
                    keyboardShouldPersistTaps='handled'
                    contentContainerStyle={style.content}
                >
                    <View>
                        <TextInput 
                            onChangeText={(text)=>{
                                this.setState({query : text , done : false});
                                this.predict();
                            }}  
                            placeholder="What do you want to play ?" 
                            placeholderTextColor="#A6A4A4"
                            value = {this.state.query}
                            onSubmitEditing = {()=>{this.setState({done : true})}}
                            underlineColorAndroid = "#0098fd"
                        ></TextInput>
                        <TouchableOpacity onPress={()=>{this.filteredEvents()}}><Icon name="search" color = "#0098fd" size = {20}></Icon></TouchableOpacity>
                    </View>


                    {
                        this.state.predictions.length != 0 && !this.state.done &&
                        <FlatList 
                            style={styles.predictor_view}
                            data={this.state.predictions}
                            extraData = {this.state}
                            renderItem = {
                                ({item})=>(
                                        <TouchableOpacity 
                                        style={styles.predictions} 
                                        onPress={()=>{
                                            console.log('ok');
                                            this.setState({query : item.key,done : true});
                                            console.log(this.state);
                                        }}>
                                            <Text>{item.key}</Text>
                                        </TouchableOpacity>
                                )
                            }
                        />
                    }
                </ScrollView>
            </TouchableWithoutFeedback>