fade optimizations

squarenotsquare/src/components/Fade.js

@@ -4,14 +4,13 @@ import { useEffect, useRef } from "react";
 
 function Fade(props){
   const faded = useRef(new Animated.Value(0.1));
-  const opaque = useRef(new Animated.Value(1));
 
   useEffect(() => {
     if (props.faded) {
       Animated.timing(
-        opaque.current,
+        faded.current,
         {
-          toValue: 0.25,
+          toValue: 0.1,
           duration: props.duration,
           useNativeDriver: true
         }
@@ -30,7 +29,7 @@ function Fade(props){
 
 
   return (
-    <Animated.View style={{ opacity: (props.faded ? opaque.current : faded.current)}}>
+    <Animated.View style={{ opacity: faded.current}}>
       {props.children}
     </Animated.View>
   )

squarenotsquare/src/screens/Game.js

@@ -139,7 +139,7 @@ function Game(props){
   function generatePair(answer, shapeIndex, pairIndex) {
     if (answer === 0) {
       return (
-        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={100}>
+        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={500}>
           <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateSquare(pairIndex)}
             {generateShape(shapeIndex, pairIndex)}
@@ -148,7 +148,7 @@ function Game(props){
       );
     } else {
       return (
-        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={100}>
+        <Fade key={pairIndex} faded={challengeState.current !== pairIndex} duration={500}>
           <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateShape(shapeIndex, pairIndex)}
             {generateSquare(pairIndex)}