Layout animation

There's a lot you can do with animation in React Native, and most of it is quite involved. In fact, you could easily spend an entire workshop and more just on animation and still only be scratching at the surface.

BUT there is one extremely simple way to do limited, but incredibly satisfying full-page animations: LayoutAnimation.

Import LayoutAnimation and call configureNext just before every time we do a state update that changes a list item.

Update: app/index.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, TextInput, FlatList, View, Text } from "react-native";
+import { StyleSheet, TextInput, FlatList, View, Text, LayoutAnimation } from "react-native";
 import { theme } from "../theme";
 import { ShoppingListItem } from "../components/ShoppingListItem";
 import { useEffect, useState } from "react";
@@ -21,6 +21,7 @@ export default function App() {
     const fetchInitial = async () => {
       const data = await getFromStorage(storageKey);
       if (data) {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
         setShoppingList(data);
       }
     };
@@ -38,6 +39,7 @@ export default function App() {
         },
         ...shoppingList,
       ];
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
       setShoppingList(newShoppingList);
       saveToStorage(storageKey, newShoppingList);
       setValue(undefined);
@@ -46,6 +48,7 @@ export default function App() {

   const handleDelete = (id: string) => {
     const newShoppingList = shoppingList.filter((item) => item.id !== id);
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     setShoppingList(newShoppingList);
   };

@@ -64,6 +67,7 @@ export default function App() {
       }
     });
     saveToStorage(storageKey, newShoppingList);
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     setShoppingList(newShoppingList);
   };

Checkpoint

✔️ Use LayoutAnimation