all modals

src/components/GroceryList/groceries/List.js

@@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
 import { FlatList, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 
 export default React.memo((props) => {
     const items = useSelector(selectAllSortedItems)
@@ -42,8 +43,8 @@ export default React.memo((props) => {
                 </WrapperLeft>
                 <WrapperRight>
                     {list.open && <>
-                        <ButtonEditList onClick={() => setModalListVisible(true)} />
-                        <ButtonRemoveList onClick={removeList} />
+                        <ButtonEditList pressFunc={() => setModalListVisible(true)} />
+                        <ButtonRemoveList pressFunc={removeList} />
                     </>}
                     <IconArrowDown visible={list.open.toString()} />
                 </WrapperRight>
@@ -51,7 +52,7 @@ export default React.memo((props) => {
             <ListSizeWrapper height={height} visible={list.open} >
                 < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
                     {list.open &&
-                        <FlatList style={{width: '100%'}}
+                        <FlatList style={{ width: '100%' }}
                             initialNumToRender={20}
                             maxToRenderPerBatch={10}
                             // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
@@ -66,8 +67,8 @@ export default React.memo((props) => {
                     }
                     {items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
                 </WrapperList >
-                <ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} /> 
-           </ListSizeWrapper>
+                <ModalEditList id={props.listId} visible={modalListVisible} closeModal={() => setModalListVisible(false)} />
+            </ListSizeWrapper>
         </Wrapper>
     )
 })