FlatList Integration

hossein-zare · Jul 4, 2020 · 5210c54 · 5210c54
1 parent faa1ad9
commit 5210c54
Showing 1 changed file with 50 additions and 39 deletions.
diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,8 @@ import {
     TouchableOpacity,
     ScrollView,
     Platform,
-    TextInput
+    TextInput,
+    FlatList
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -200,6 +201,47 @@ class DropDownPicker extends React.Component {
         return this.props.multipleText.replace('%d', this.state.choice.length);
     }
 
+    _renderItem = ({item,index})=> {
+            return ( 
+                    <TouchableOpacity
+                                key={index}
+                                onPress={() => this.select(item, index)}
+                                style={[styles.dropDownItem, this.props.itemStyle, (
+                                    this.state.choice.value === item.value && this.props.activeItemStyle
+                                ), {
+                                    opacity: item?.disabled || false === true ? 0.3 : 1,
+                                    ...(
+                                        this.state.props.multiple && {
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between'
+                                        }
+                                    )
+                                }]}
+                                disabled={item?.disabled || false === true}
+                            >
+                                <Text style={[this.props.labelStyle, 
+                                    this.state.choice.value === item.value && this.props.activeLabelStyle
+                                ]}>{item.label}</Text>
+                                {
+                                    this.state.props.multiple && this.state.choice.findIndex(i => i.label === item.label && i.value === item.value) > -1 && (
+                                        this.props.customTickIcon()
+                                    )
+                                }
+                    </TouchableOpacity> 
+                    )
+    }
+
+    _renderEmptyContainer = () => {
+        return (
+            <Text style={[styles.notFound, {
+                fontFamily: this.props.labelStyle?.fontFamily
+            }]}>
+                {this.props.searchableError}
+            </Text>
+            )
+    }
+
     render() {
         const { multiple, disabled } = this.state.props;
         const { placeholder } = this.props;
@@ -278,44 +320,13 @@ class DropDownPicker extends React.Component {
                       )
                     }
 
-                    <ScrollView style={{width: '100%'}} nestedScrollEnabled={true}>
-                        {
-                            items.length > 0 ? items.map((item, index) => (
-                                <TouchableOpacity
-                                    key={index}
-                                    onPress={() => this.select(item, index)}
-                                    style={[styles.dropDownItem, this.props.itemStyle, (
-                                        this.state.choice.value === item.value && this.props.activeItemStyle
-                                    ), {
-                                        opacity: item?.disabled || false === true ? 0.3 : 1,
-                                        ...(
-                                            multiple && {
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                justifyContent: 'space-between'
-                                            }
-                                        )
-                                    }]}
-                                    disabled={item?.disabled || false === true}
-                                >
-                                    <Text style={[this.props.labelStyle, 
-                                        this.state.choice.value === item.value && this.props.activeLabelStyle
-                                    ]}>{item.label}</Text>
-                                    {
-                                        multiple && this.state.choice.findIndex(i => i.label === item.label && i.value === item.value) > -1 && (
-                                            this.props.customTickIcon()
-                                        )
-                                    }
-                                </TouchableOpacity>
-                            )) : (
-                                <Text style={[styles.notFound, {
-                                    fontFamily: this.props.labelStyle?.fontFamily
-                                }]}>
-                                    {this.props.searchableError}
-                                </Text>
-                            )
-                        }
-                    </ScrollView>
+                <FlatList 
+                    style={{width: '100%'}}  
+                    data={items}
+                    renderItem={this._renderItem}
+                    keyExtractor={(item, index) => index.toString()}
+                    ListEmptyComponent={this._renderEmptyContainer}>   
+                </FlatList>
                 </View>
             </View>
         );