Add useLayoutAnimation

README.md

@@ -31,6 +31,7 @@ yarn add @react-native-community/hooks
 - [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager)
 - [useDeviceOrientation](https://github.com/react-native-community/hooks#usedeviceorientation)
 - [useLayout](https://github.com/react-native-community/hooks#uselayout)
+- [useLayoutAnimation](https://github.com/react-native-community/hooks#uselayoutanimation)
 
 ### `useAccessibilityInfo`
 
@@ -173,6 +174,32 @@ console.log('layout: ', layout)
 <View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />
 ```
 
+### `useLayoutAnimation`
+
+```js
+import { useLayoutAnimation } from '@react-native-community/hooks'
+
+const { animateNext } = useLayoutAnimation()
+
+const removeItem = (id: number) => {
+  // Animates the row deletion,
+  // you can also provide the same parameters as with `.configureNext`.
+  animateNext()
+  setItems(items.filter((item: Item) => item.id !== id))
+}
+
+return (
+  <View>
+    {items.map((item: Item) => (
+      <View key={item.id}>
+        <Text>{item.name}</Text>
+        <Button color="red" title="delete" onPress={() => removeItem(item.id)}/>
+      </View>
+    ))}
+  </View>
+)
+```
+
 [version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square
 [package]: https://www.npmjs.com/package/@react-native-community/hooks
 

src/useLayoutAnimation.ts

@@ -0,0 +1,46 @@
+import {useEffect} from 'react'
+import {
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  LayoutAnimationConfig,
+} from 'react-native'
+
+/**
+ * A custom hook that allows you to easily and automatically animate the next set of layout changes.
+ * It uses `LayoutAnimation` under the hood. This allows you to automatically animate:
+ * update, delete, move, add animations.
+ *
+ * IMPORTANT NOTE:
+ *
+ * In order for this to work properly in lists you need to ensure your `key` value is unique!
+ *
+ */
+const useLayoutAnimation = () => {
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      UIManager.setLayoutAnimationEnabledExperimental(true)
+    }
+  }, [])
+
+  /**
+   * Schedules an animation to happen on the next layout.
+   * @param config
+   * Specifies animation properties: duration in milliseconds create,
+   * config for animating in new views (see Anim type) update,
+   * config for animating views that have been update (see Anim type).
+   * If no value is provided, a default `easeInEaseOut` preset is used.
+   *
+   * @param onAnimationDidEnd — Called when the animation finished. Only supported on iOS.
+   */
+  const animateNext = (
+    config: LayoutAnimationConfig = LayoutAnimation.Presets.easeInEaseOut,
+    onAnimationDidEnd?: (() => void) | undefined,
+  ) => {
+    LayoutAnimation.configureNext(config, onAnimationDidEnd)
+  }
+
+  return {animateNext}
+}
+
+export default useLayoutAnimation