From f9d1086f4aa023d7d75d0f685c4a716fa40e75d6 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Tue, 2 Aug 2022 22:16:44 -0500
Subject: [PATCH] Sliders

---
 squarenotsquare/src/components/Slider.js | 25 ++++++++++++++++++++++++
 squarenotsquare/src/screens/Home.js      | 25 ++++++++++++++----------
 2 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 squarenotsquare/src/components/Slider.js

diff --git a/squarenotsquare/src/components/Slider.js b/squarenotsquare/src/components/Slider.js
new file mode 100644
index 0000000..b0942b6
--- /dev/null
+++ b/squarenotsquare/src/components/Slider.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Animated, Easing} from "react-native";
+import { useEffect, useState } from "react";
+
+function LeftToRight(props){
+  const [xPosition, setXPosition] = useState(new Animated.Value(props.origin));
+
+  useEffect(() => {
+    Animated.timing(xPosition, {
+      toValue: 0,
+      easing: Easing.back(),
+      duration: props.duration,
+      useNativeDriver: true
+    }).start();
+  }, []);
+
+
+  return (
+    <Animated.View style={{ transform: [{ translateX: xPosition }]}}>
+      {props.children}
+    </Animated.View>
+  )
+}
+
+export default LeftToRight;
\ No newline at end of file
diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index d5b0ec3..8333bb6 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/squarenotsquare/src/screens/Home.js
@@ -6,6 +6,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
 import Metrics from "../themes/Metrics";
+import Slider from "../components/Slider";
 
 function Home(props){
 
@@ -35,16 +36,20 @@ function Home(props){
         </Text>
       </View>
       <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>
-        <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
-          <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
-            Start
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
-          <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
-            High Scores
-          </Text>
-        </TouchableOpacity>
+        <Slider origin={-500} duration={750}>
+          <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
+            <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
+              Start
+            </Text>
+          </TouchableOpacity>
+        </Slider>
+        <Slider origin={500} duration={750}>
+          <TouchableOpacity style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}>
+            <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
+              High Scores
+            </Text>
+          </TouchableOpacity>
+        </Slider>
       </View>
       <View style={[styles.footer, styles.centeredJustify]}>
         <Text style={[styles.greyText, styles.tinyFont, styles.centeredText]}>