diff --git a/README.md b/README.md
index 1b2ea981..80941c5c 100644
--- a/README.md
+++ b/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)
```
+### `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 (
+
+ {items.map((item: Item) => (
+
+ {item.name}
+
+ ))}
+
+)
+```
+
[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
diff --git a/src/useLayoutAnimation.ts b/src/useLayoutAnimation.ts
new file mode 100644
index 00000000..e6c56a84
--- /dev/null
+++ b/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