autoscroller

squarenotsquare/src/components/Autoscroll.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Animated, Easing} from "react-native";
+import { useEffect, useRef } from "react";
+import Metrics from "../themes/Metrics";
+
+function Autoscroll(props){
+  const yPosition = useRef(new Animated.Value(props.origin));
+
+  useEffect(() => {
+    Animated.timing(yPosition.current, {
+        toValue: props.destination - Metrics.animated.gameScrollInterval,
+        duration: props.duration,
+        useNativeDriver: true
+    }).start(); 
+  }, [props.origin])
+
+
+  return (
+    <Animated.View style={{ transform: [{ translateY: yPosition.current }]}}>
+      {props.children}
+    </Animated.View>
+  )
+}
+
+export default Autoscroll;

squarenotsquare/src/screens/Game.js

@@ -5,6 +5,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import {genSquareChallenge} from '../libs/Random';
 import {shapes} from '../libs/ShapeEnum';
 import { styles } from "./styles/AppStyles";
+import Autoscroll from "../components/Autoscroll";
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
@@ -17,6 +18,8 @@ function Game(props){
   const [timerState, setTimerState] = useState(0);
   const localTimer = useRef(null);
   const startTime = useRef(0);
+  const [scrollOrigin, setScrollOrigin] = useState(0);
+  const scrollDestination = useRef(Metrics.animated.gameScrollInterval);
   const [headerText, setHeaderText] = useState('Ready?');
   const [headerColor, setHeaderColor] = useState(styles.green);
   const [headerTextColor, setHeaderTextColor] = useState(styles.darkText);
@@ -66,9 +69,20 @@ function Game(props){
     }
   }, [timerState]);
 
+  function scroll(){
+    let newOrigin = scrollDestination.current;
+    let newDestination = scrollDestination.current - Metrics.animated.gameScrollInterval;
+
+    scrollDestination.current = newDestination;
+    setScrollOrigin(newOrigin);
+  }
+
   function generateSquare(){
     return (
-      <TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}>
+      <TouchableOpacity
+        onPress={scroll}
+        style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}
+      >
         <MaterialIcon
           name={Icons.squareIcons.square}
           color={Colors.material.dark}
@@ -80,7 +94,10 @@ function Game(props){
 
   function generateShape(index){
     return (
-      <TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}>
+      <TouchableOpacity
+        onPress={scroll}
+        style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}
+      >
         <MaterialIcon
           name={shapes[index]}
           color={Colors.material.dark}
@@ -121,10 +138,16 @@ function Game(props){
           {headerText}
         </Text>
       </View>
-      <ScrollView style={[styles.flex, styles.flexColumn]}>
+      <View style={[styles.flex, styles.flexColumn]}>
+        <Autoscroll
+          origin={scrollOrigin}
+          destination={scrollDestination.current}
+          duration={250}
+        >
           <View style={[styles.gameStart]} />
           {squareMemo}
-      </ScrollView>
+        </Autoscroll>
+      </View>
     </SafeAreaView>
   );
 }

squarenotsquare/src/themes/Metrics.js

@@ -61,7 +61,10 @@ class AppMetrics {
     }
 
     this.animated = {
-      gameScrollInterval: (this.answerButtonHeight + (this.buttonMargin * 2))
+      gameScrollInterval: (
+        this.buttons.answerButton.height +
+        (this.margins.buttonMargin * 2)
+      )
     }
 
     this.borders = {