faded square buttons

squarenotsquare/src/screens/Game.js

@@ -5,6 +5,7 @@ import {genSquareChallenge} from '../libs/Random';
 import {shapes} from '../libs/ShapeEnum';
 import { styles } from "./styles/AppStyles";
 import Autoscroll from "../components/Autoscroll";
+import Fade from "../components/Fade";
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
@@ -13,8 +14,8 @@ import Metrics from "../themes/Metrics";
 function Game(props){
 
   const squareChallenge = useRef(genSquareChallenge());
-  const squareMemo = useMemo(renderPairs, [squareChallenge]);
   const challengeState = useRef(0);
+  const squareMemo = useMemo(renderPairs, [challengeState.current]);
   const [timerState, setTimerState] = useState(0);
   const localTimer = useRef(null);
   const startTime = useRef(0);
@@ -113,17 +114,21 @@ function Game(props){
   function generatePair(answer, shapeIndex, pairIndex) {
     if (answer === 0) {
       return (
+        <Fade faded={challengeState.current !== pairIndex} duration={100}>
           <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateSquare(pairIndex)}
             {generateShape(shapeIndex, pairIndex)}
           </View>          
+        </Fade>
       );
     } else {
       return (
+        <Fade faded={challengeState.current !== pairIndex} duration={100}>
           <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
             {generateShape(shapeIndex, pairIndex)}
             {generateSquare(pairIndex)}
           </View>
+        </Fade>
       );
     }
   }