Animate React-Native components based on MobX observables changes

useObservableAnimation.js

import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
import { reaction } from "mobx";
import { observer } from "mobx-react";

const defaultCheckObservedValue = observed => observed.visible;

const defaultCreateAnimationIn = animValue =>
  Animated.timing(animValue, {
    toValue: 1,
    useNativeDriver: true
  });

const defaultCreateAnimationOut = animValue =>
  Animated.timing(animValue, {
    toValue: 0,
    useNativeDriver: true
  });

const defaultCreateAnimatedStyle = animValue => ({
  transform: [{ scale: animValue }]
});

export const useObservableAnimation = function({
  observed, // The observed item
  checkObservedValue = defaultCheckObservedValue,
  createAnimationIn = defaultCreateAnimationIn,
  createAnimationOut = defaultCreateAnimationOut,
  createAnimatedStyle = defaultCreateAnimatedStyle
}) {
  const [animValue] = useState(
    new Animated.Value(checkObservedValue(observed))
  );

  useEffect(() => {
    return reaction(
      () => checkObservedValue(observed),
      shouldAnimate => {
        if (shouldAnimate) {
          createAnimationIn(animValue).start();
        } else {
          createAnimationOut(animValue).start();
        }
      }
    );
  }, []);

  return createAnimatedStyle(animValue);
};