Add animated style utils

index.js

@@ -10,3 +10,9 @@ export { ZoomOut } from './src/animations/ZoomOut';
 export { HeroHeader } from './src/animations/HeroHeader';
 export { DriverShape } from './src/drivers/DriverShape';
 export { connectAnimation } from './src/components/connectAnimation';
+export {
+  isAnimatedStyleValue,
+  getAnimatedStyleValue,
+  addAnimatedValueListener,
+  removeAnimatedValueListener,
+} from './src/utils/animated-style';

src/utils/animated-style.js

@@ -0,0 +1,75 @@
+import { Animated } from 'react-native';
+
+/**
+ * Checks if a style value is animated.
+ *
+ * @param value The value to check.
+ * @returns {boolean} `true` if a value is animated, `false` otherwise.
+ */
+export const isAnimatedStyleValue = (value) => value && typeof value.interpolate === 'function';
+
+/**
+ * Gets the current value of an animated style value. If
+ * a value isn't animated, the original value will be returned.
+ *
+ * @param value The style value.
+ * @return {*} The current value of a provided animated value.
+ */
+export const getAnimatedStyleValue = (value) => {
+  if (isAnimatedStyleValue(value)) {
+    // If this is an animated value, we want to convert it to
+    // a plain object in order to get its current value.
+    return value.toJSON();
+  }
+
+  return value;
+};
+
+const findAnimatedValue = (animatedStyleValue) => {
+  if (animatedStyleValue instanceof Animated.Value) {
+    return animatedStyleValue;
+  }
+
+  const parent = animatedStyleValue._parent;
+  if (parent) {
+    return findAnimatedValue(parent);
+  }
+
+  return undefined;
+};
+
+/**
+ * Adds a listener to the animated value, or the closest parent
+ * that is an animated value. This function is useful in components
+ * that receive animated interpolations but need to react to changes
+ * of those values during animations.
+ *
+ * @param styleValue The style value to add the listener to.
+ * @param listener The listener to add.
+ * @returns {string} The listener id, or `undefined` if the
+ *   listener couldn't be registered.
+ */
+export const addAnimatedValueListener = (styleValue, listener) => {
+  const animatedValue = findAnimatedValue(styleValue);
+  if (animatedValue) {
+    return animatedValue.addListener(listener);
+  }
+
+  return undefined;
+};
+
+/**
+ * Remove the animated value listener with the given id. The
+ * listener will be removed from the `styleValue` argument if
+ * it is an `AnimatedValue` or the closest `AnimatedValue` parent
+ * if it isn't.
+ *
+ * @param styleValue The style value to remove the listener from.
+ * @param listenerId The id of the listener to remove.
+ */
+export const removeAnimatedValueListener = (styleValue, listenerId) => {
+  const animatedValue = findAnimatedValue(styleValue);
+  if (animatedValue) {
+    animatedValue.removeListener(listenerId);
+  }
+};