implement scroll picker

squarenotsquare/src/components/ScrollingPicker.js

@@ -0,0 +1,58 @@
+import React, { useRef, useState } from "react";
+import {
+  ScrollView,
+  Animated,
+} from "react-native";
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Icons from '../themes/Icons';
+import Colors from "../themes/Colors";
+import Metrics from "../themes/Metrics";
+import { styles } from "../screens/styles/AppStyles";
+
+function ScrollingPicker() {
+  const scrollX = useRef(new Animated.Value(0)).current;
+  const [selected, setSelected] = useState(0);
+
+  function onScroll(event){
+    if (event.nativeEvent.contentOffset.x === 0) {
+      setSelected(0);
+    } else if (event.nativeEvent.contentOffset.x === Metrics.icons.buttonIcon) {
+      setSelected(1);
+    }
+    Animated.event([
+      {
+        nativeEvent: {
+          contentOffset: {
+            x: scrollX
+          }
+        }
+      }
+    ], {useNativeDriver: true})
+  }
+
+  return (
+    <ScrollView
+      horizontal={true}
+      pagingEnabled={true}
+      showsHorizontalScrollIndicator={false}
+      style={styles.modePicker}
+      onScroll={onScroll}
+      scrollEventThrottle={0}
+    >
+      <MaterialIcon
+        key={0}
+        name={Icons.squareIcons.square}
+        color={Colors.material.green400}
+        size={Metrics.icons.buttonIcon}
+      />
+      <MaterialIcon
+        key={1}
+        name={Icons.squareIcons.plus}
+        color={Colors.material.green400}
+        size={Metrics.icons.buttonIcon}
+      />
+    </ScrollView>
+  );
+}
+
+export default ScrollingPicker;

squarenotsquare/src/screens/Home.js

@@ -9,6 +9,7 @@ import Slider from "../components/Slider";
 import { useDispatch } from "react-redux";
 import {squareStartPressed} from '../redux/actions/UserActions';
 import { goToScores } from "../redux/actions/SystemActions";
+import ModePicker from '../components/ScrollingPicker';
 
 function Home(){
   const dispatch = useDispatch();
@@ -36,7 +37,8 @@ function Home(){
           size={Metrics.icons.buttonIcon}
         />
       </TouchableOpacity>
-      <View style={[styles.flexHalf, styles.spaceAround]}>
+      <View style={[styles.flexHalf, styles.spaceEvenly]}>
+        <View style={styles.flex}>
           <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.darkText]}>
             Square
             <Text style={[styles.green, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
@@ -47,6 +49,10 @@ function Home(){
             </Text>
           </Text>
         </View>
+        <View style={[styles.flex, styles.centeredSelf]}>
+          <ModePicker />
+        </View>
+      </View>
       <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>
         <Slider origin={400} duration={750} delay={0}>
           <TouchableOpacity

squarenotsquare/src/screens/styles/AppStyles.js

@@ -111,6 +111,11 @@ export const styles = StyleSheet.create({
     height: Metrics.icons.buttonIcon
   },
 
+  modePicker: {
+    width: Metrics.icons.buttonIcon,
+    overflow: "visible"
+  },
+
   timerView: {
     height: Metrics.screenSections.timerHeight
   }

squarenotsquare/src/themes/Icons.js

@@ -4,7 +4,8 @@ class AppIcons {
     settings: 'cog-outline',
     toggleOn: 'toggle-switch-on',
     toggleOff: 'toggle-switch-off',
-    check: 'check'
+    check: 'check',
+    plus: 'plus'
   };
 
   wrongShapes = {