Abstraction for React Native's LayoutAnimation and useState
yarn add use-state-with-layout-animation
Or
npm install --save use-state-with-layout-animation
Download expo client and scan the QR code to run the snack on your iOS or Android device. (It does not work on web)
By default, UIManager.setLayoutAnimationEnabledExperimental is invoked, you can pass false as the second parameter if you want to call it on your own.
const [state, setState] = useStateWithLayoutAnimation(123, false);
You can use this the same as useState setter, accepts values or optional callback function but accepts a second parameter for the animation finish callback.
const [state, setState] = useStateWithLayoutAnimation(1);
const animationDidFinish = () => console.log('Animation finished');
setState.spring(2, animationDidFinish);
setState.linear(prev => prev + 10, animationDidFinish);
setState.easeInEaseOut(4, animationDidFinish);You can use this the same as useState setter, accepts values or optional callback function.
setState.noAnimation(4);
setState.noAnimation(prev => prev + 1);