Sliders

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;

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]}>
+        <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]}>