feat: made the list searchable

src/components/dropdown/index.js

@@ -11,6 +11,7 @@ import {
   Platform,
   ViewPropTypes,
   I18nManager,
+  TextInput,
 } from 'react-native';
 import Ripple from 'react-native-material-ripple';
 import { TextField } from 'react-native-material-textfield';
@@ -185,6 +186,8 @@ export default class Dropdown extends PureComponent {
       selected: -1,
       modal: false,
       value,
+      data: this.props.data,
+      searchText: undefined,
     };
   }
 
@@ -340,21 +343,26 @@ export default class Dropdown extends PureComponent {
 
   onSelect(index) {
     let {
-      data,
       valueExtractor,
       onChangeText,
       animationDuration,
       rippleDuration,
     } = this.props;
 
+    let data = this.state.data;
+
+
     let value = valueExtractor(data[index], index);
     let delay = Math.max(0, rippleDuration - animationDuration);
 
     if ('function' === typeof onChangeText) {
       onChangeText(value, index, data);
     }
 
-    setTimeout(() => this.onClose(value), delay);
+    setTimeout(() => {
+      this.onClose(value);
+      this.setState({data: this.props.data});
+    }, delay);
   }
 
   onLayout(event) {
@@ -562,6 +570,18 @@ export default class Dropdown extends PureComponent {
     );
   }
 
+  searchFilterFunction(searchText) {
+
+    let arrayholder = this.props.data
+    const newData = arrayholder.filter(item => {
+    const itemData = `${item.value.toUpperCase()}`;
+    const textData = searchText.toUpperCase();
+       return itemData.indexOf(textData) > -1;
+    });
+    newData.push({value: searchText});
+    this.setState({ data: [...newData, {value: 'Unknown'}], searchText });
+  };
+
   renderItem({ item, index }) {
     if (null == item) {
       return null;
@@ -745,12 +765,23 @@ export default class Dropdown extends PureComponent {
             onResponderRelease={this.blur}
           >
             <View
-              style={[styles.picker, pickerStyle, pickerStyleOverrides]}
+              style={[styles.picker, pickerStyle, pickerStyleOverrides, {height: 200}]}
               onStartShouldSetResponder={() => true}
             >
+              <TextInput
+                style={styles.input}
+                placeholder={'Search here'}
+                placeholderTextColor="#808080"
+                clearButtonMode="always"
+                onSubmitEditing={() => {
+                  this.setState({value: this.state.searchText, modal: false})
+                }}
+                onChangeText={text => this.searchFilterFunction(text)}
+              />
+
               <FlatList
                 ref={this.updateScrollRef}
-                data={data}
+                data={this.state.data}
                 style={styles.scroll}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}

src/components/dropdown/styles.js

@@ -35,8 +35,6 @@ export default StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 1.0)',
     borderRadius: 2,
 
-    position: 'absolute',
-
     ...Platform.select({
       ios: {
         shadowRadius: 2,
@@ -56,11 +54,20 @@ export default StyleSheet.create({
   },
 
   scroll: {
-    flex: 1,
+    flex: 0.8,
     borderRadius: 2,
   },
 
   scrollContainer: {
     paddingVertical: 8,
   },
+
+  input: {
+    flex: 0.2,
+    height: 40,
+    margin: 12,
+    borderBottomWidth: 0.5,
+    color: '#808080',
+  },
+
 });