animations

src/components/GroceryList/groceries/List.js

@@ -9,25 +9,38 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
 import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
-import { Alert, FlatList, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Alert, Platform, UIManager, FlatList, LayoutAnimation } from 'react-native';
+
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 export default React.memo((props) => {
     const items = useSelector(selectAllSortedItems)
     const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
 
-    const [height, setHeight] = useState(100);
+    const [height, setHeight] = useState(0);
 
     useEffect(() => {
-        setHeight(1);
-    }, [list.open, items]);
+        if (list.open === true) {
+            setHeight(1)
+        }
+    }, [items.length, list.open]);
 
     const dispatch = useDispatch()
-
+    const filteredItems = items.filter(item => item.listId === props.listId)
 
     const [modalItemVisible, setModalItemVisible] = useState(false);
     const [modalListVisible, setModalListVisible] = useState(false);
 
+    const HandleAnimation = (event) => {
+        LayoutAnimation.configureNext(LayoutAnimation.create(300, 'easeInEaseOut', 'opacity'))
+        setHeight(event.nativeEvent.layout.height)
+    }
+
     const removeList = () => {
         Alert.alert(
             "Warning",
@@ -60,13 +73,13 @@ export default React.memo((props) => {
                 </WrapperRight>
             </WrapperListTitle>
             <ListSizeWrapper height={height} visible={list.open} >
-                < WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
+                < WrapperList listLength={items.length} onLayout={(event) => { HandleAnimation(event) }}>
                     {list.open &&
                         <FlatList style={{ width: '100%' }}
-                            initialNumToRender={20}
+                            initialNumToRender={10}
                             maxToRenderPerBatch={10}
-                            // ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
-                            data={items.filter(item => item.listId === props.listId)}
+                            ListFooterComponent={filteredItems.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
+                            data={filteredItems}
                             renderItem={({ item }) => (
                                 <ListedItem item={item} setVisible={setModalItemVisible} />
                             )}