Groceries done

src/components/GroceryList/groceries/List.js

@@ -24,21 +24,33 @@ export default React.memo((props) => {
 
     const [height, setHeight] = useState(0);
 
-    useEffect(() => {
-        if (list.open === true) {
-            setHeight(1)
-        }
-    }, [items.length, list.open]);
-
     const dispatch = useDispatch()
     const filteredItems = items.filter(item => item.listId === props.listId)
 
+    // if list gets opened
+    useEffect(() => {
+        if (list.open === true) {
+            setHeight(0.5)
+        }
+        if (list.open === true && filteredItems.length === 0) {
+            setHeight(0.5)
+        }
+    }, [list.open]);
+    // if item is added or removed
+    useEffect(() => {
+        if (list.open === true) {
+            setHeight(height + 1)
+        }
+    }, [items.length]);
+
+
     const [modalItemVisible, setModalItemVisible] = useState(false);
     const [modalListVisible, setModalListVisible] = useState(false);
 
     const HandleAnimation = (event) => {
-        LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity'))
+        LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
         setHeight(event.nativeEvent.layout.height)
+        // console.log("height changed: ", event.nativeEvent.layout.height)
     }
 
     const removeList = () => {
@@ -76,9 +88,9 @@ export default React.memo((props) => {
                 < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
                     {list.open &&
                         <FlatList style={{ width: '100%' }}
-                            initialNumToRender={10}
-                            maxToRenderPerBatch={10}
-                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
+                            initialNumToRender={5}
+                            maxToRenderPerBatch={5}
+                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22, width: '100%', height: 30, alignSelf: 'center' }} >Add a grocery</ListSubtitle>}
                             data={filteredItems}
                             renderItem={({ item }) => (
                                 <ListedItem item={item} setVisible={setModalItemVisible} />