animations

src/components/GroceryList/groceries/GroceryButtons.js

@@ -8,7 +8,14 @@ import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperS
 import { useSelector, useDispatch } from 'react-redux'
 import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
 import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
-import { Alert } from 'react-native'
+import { Alert, LayoutAnimation, Platform, UIManager } from 'react-native'
+
+if (
+    Platform.OS === "android" &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
 
 const SelectAllItemsButton = (props) => {
     const dispatch = useDispatch()
@@ -52,11 +59,20 @@ const RemoveItemsButton = (props) => {
 
 export const ContainerButtons = (props) => {
     const [visible, setVisible] = useState(false);
+    const toggleAnimation = () => {
+        LayoutAnimation.configureNext({
+            duration: 500,
+            create: { type: 'linear', property: 'opacity' },
+            update: { type: 'spring', springDamping: 0.8 },
+            delete: { type: 'linear', property: 'opacity' }
+        })
+        setVisible(!visible)
+    }
     return (
         <>
             <SelectAllItemsButton visible={visible} />
             <RemoveItemsButton visible={visible} />
-            <WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
+            <WrapperButtons toggle={visible} onPress={toggleAnimation}>
                 <MenuIcon />
             </WrapperButtons >
         </>