fade component

squarenotsquare/src/components/Fade.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Animated} from "react-native";
+import { useEffect, useRef } from "react";
+
+function Fade(props){
+  const faded = useRef(new Animated.Value(0.25));
+  const opaque = useRef(new Animated.Value(1));
+
+  useEffect(() => {
+    if (props.faded) {
+      Animated.timing(
+        opaque.current,
+        {
+          toValue: 0.25,
+          duration: props.duration,
+          useNativeDriver: true
+        }
+      ).start();
+    } else {
+      Animated.timing(
+        faded.current,
+        {
+          toValue: 1,
+          duration: props.duration,
+          useNativeDriver: true
+        }
+      ).start();
+    }
+  }, [props.faded])
+
+
+  return (
+    <Animated.View style={{ opacity: (props.faded ? opaque.current : faded.current)}}>
+      {props.children}
+    </Animated.View>
+  )
+}
+
+export default Fade;