diff --git a/squarenotsquare/src/components/ScrollingPicker.js b/squarenotsquare/src/components/ScrollingPicker.js
new file mode 100644
index 0000000..6d90801
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+}
+
+export default ScrollingPicker;
\ No newline at end of file
diff --git a/squarenotsquare/src/screens/Home.js b/squarenotsquare/src/screens/Home.js
index 512ef1d..0a1bb49 100644
--- a/squarenotsquare/src/screens/Home.js
+++ b/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,16 +37,21 @@ function Home(){
size={Metrics.icons.buttonIcon}
/>
-
-
- Square
-
- {' not '}
-
-
+
+
+
Square
+
+ {' not '}
+
+
+ Square
+
-
+
+
+
+
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index aeac431..f11ec28 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/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
}
diff --git a/squarenotsquare/src/themes/Icons.js b/squarenotsquare/src/themes/Icons.js
index 91ddd10..19d1a79 100644
--- a/squarenotsquare/src/themes/Icons.js
+++ b/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 = {