Virtualised-list nesting problem in (replace Flatlist)

[KM8Oz]

Hi!👋

Firstly, thanks for your work on this project!🙂

Today I used patch-package to patch react-native-multiple-select@0.5.12for the project I'm working on.

im made some change

Here is the diff that solved my problem:

diff--gita/node_modules/react-native-multiple-select/lib/react-native-multi-select.jsb/node_modules/react-native-multiple-select/lib/react-native-multi-select.js
index9b7a0d7..95ab4d8100644
---a/node_modules/react-native-multiple-select/lib/react-native-multi-select.js
+++b/node_modules/react-native-multiple-select/lib/react-native-multi-select.js
@@-5,10+5,10@@import{
  TextInput,
  TouchableWithoutFeedback,
  TouchableOpacity,
- FlatList,
+ ScrollView,
  UIManager
}from'react-native';
-import{ViewPropTypes,TextPropTypes}from'deprecated-react-native-prop-types';
+import{ViewPropTypes,TextPropTypes}from'deprecated-react-native-prop-types';
importPropTypesfrom'prop-types';
importrejectfrom'lodash/reject';
importfindfrom'lodash/find';
@@-116,12+116,12@@exportdefaultclassMultiSelectextendsComponent{
    fixedHeight:false,
    hideTags:false,
    hideDropdown:false,
-   onChangeInput:()=>{},
+   onChangeInput:()=>{},
    displayKey:'name',
    canAddItems:false,
-   onAddItem:()=>{},
-   onClearSelector:()=>{},
-   onToggleList:()=>{},
+   onAddItem:()=>{},
+   onClearSelector:()=>{},
+   onToggleList:()=>{},
    removeSelected:false,
    noItemsText:'Noitemstodisplay.',
    selectedText:'selected'
@@-372,10+372,11@@exportdefaultclassMultiSelectextendsComponent{
    };
  };

- _getRow=item=>{
+ _getRow=(item,index)=>{
    const{selectedItemIconColor,displayKey,styleRowList}=this.props;
    return(
      <TouchableOpacity
+       key={index}
        disabled={item.disabled}
        onPress={()=>this._toggleItem(item)}
        style={[
@@-506,15+507,21@@exportdefaultclassMultiSelectextendsComponent{
    }
    if(renderItems.length){
      itemList=(
-       <FlatList
-         data={renderItems}
-         extraData={selectedItems}
-         keyExtractor={(item,index)=>index.toString()}
-         listKey={item=>item[uniqueKey]}
-         renderItem={rowData=>this._getRow(rowData.item)}
-         {...flatListProps}
-         nestedScrollEnabled
-       />
+       //<FlatList    //( Flatlist can't be nested inside a Scrollview)
+       //  data={renderItems}
+       //  extraData={selectedItems}
+       //  keyExtractor={(item,index)=>index.toString()}
+       //  listKey={item=>item[uniqueKey]}
+       //  renderItem={rowData=>this._getRow(rowData.item)}
+       //  {...flatListProps}
+       //  accessibilityElementsHidden={true}
+       //  nestedScrollEnabled
+       ///>
+       <ScrollViewstyle={{
+         maxHeight:300
+       }} nestedScrollEnabled>
+         {renderItems.map((item,index)=>this._getRow(item,index))}
+       </ScrollView>
      );
      searchTermMatch=renderItems.filter(item=>item.name===searchTerm)
        .length;
@@-585,8+592,8@@exportdefaultclassMultiSelectextendsComponent{
          {
            flexDirection:'column'
          }&&
-           styleMainWrapper&&
-           styleMainWrapper
+         styleMainWrapper&&
+         styleMainWrapper
        ]}
      >
        {selector?(
@@-682,36+689,36@@exportdefaultclassMultiSelectextendsComponent{
                    style={{
                      flex:1,
                      flexDirection:'row',
-                     alignItems:'center'
+                     alignItems:'center',
                    }}
                  >
                    <Text
                      style={
                        !selectedItems||selectedItems.length===0
                          ?[
-                             {
-                               flex:1,
-                               fontSize:fontSize||16,
-                               color:
-                                 textColor||colorPack.placeholderTextColor
-                             },
-                             styleTextDropdown&&styleTextDropdown,
-                             altFontFamily
-                               ?{fontFamily:altFontFamily}
-                               :fontFamily
+                           {
+                             flex:1,
+                             fontSize:fontSize||16,
+                             color:
+                               textColor||colorPack.placeholderTextColor
+                           },
+                           styleTextDropdown&&styleTextDropdown,
+                           altFontFamily
+                             ?{fontFamily:altFontFamily}
+                             :fontFamily
                                ?{fontFamily}
                                :{}
-                           ]
+                         ]
                          :[
-                             {
-                               flex:1,
-                               fontSize:fontSize||16,
-                               color:
-                                 textColor||colorPack.placeholderTextColor
-                             },
-                             styleTextDropdownSelected&&
-                               styleTextDropdownSelected
-                           ]
+                           {
+                             flex:1,
+                             fontSize:fontSize||16,
+                             color:
+                               textColor||colorPack.placeholderTextColor
+                           },
+                           styleTextDropdownSelected&&
+                           styleTextDropdownSelected
+                         ]
                      }
                      numberOfLines={1}
                    >
diff--gita/node_modules/react-native-multiple-select/lib/styles.jsb/node_modules/react-native-multiple-select/lib/styles.js
index7e2da8d..59db032100644
---a/node_modules/react-native-multiple-select/lib/styles.js
+++b/node_modules/react-native-multiple-select/lib/styles.js
@@-26,7+26,7@@exportdefault{
    flexDirection:'column',
  },
  subSection:{
-   backgroundColor:colorPack.light,
+   //backgroundColor:colorPack.light,
    borderBottomWidth:1,
    borderColor:colorPack.borderColor,
    paddingLeft:0,
@@-81,7+81,7@@exportdefault{
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:16,
-   backgroundColor:colorPack.light,
+   //backgroundColor:colorPack.light,
  },
  dropdownView:{
    flexDirection:'row',