Mode text and setter

squarenotsquare/src/components/ScrollingPicker.js

@@ -8,16 +8,17 @@ import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
 import Metrics from "../themes/Metrics";
 import { styles } from "../screens/styles/AppStyles";
+import finalPropsSelectorFactory from "react-redux/es/connect/selectorFactory";
 
-function ScrollingPicker() {
+function ScrollingPicker(props) {
   const scrollX = useRef(new Animated.Value(0)).current;
   const [selected, setSelected] = useState(0);
 
   function onScroll(event){
     if (event.nativeEvent.contentOffset.x === 0) {
-      setSelected(0);
+      props.modeSetter(0);
     } else if (event.nativeEvent.contentOffset.x === (Metrics.icons.buttonIcon * 2)) {
-      setSelected(1);
+      props.modeSetter(1);
     }
     Animated.event([
       {
@@ -43,13 +44,13 @@ function ScrollingPicker() {
         name={Icons.squareIcons.square}
         color={Colors.material.dark}
         size={Metrics.icons.buttonIcon}
-        style={{marginLeft: Metrics.icons.buttonIcon * 0.5, marginRight: Metrics.icons.buttonIcon * 0.5}}
+        style={styles.modePickerMargin}
       />
       <MaterialIcon
         name={Icons.squareIcons.plus}
         color={Colors.material.dark}
         size={Metrics.icons.buttonIcon}
-        style={{marginLeft: Metrics.icons.buttonIcon * 0.5, marginRight: Metrics.icons.buttonIcon * 0.5}}
+        style={styles.modePickerMargin}
       />
     </ScrollView>
   );

squarenotsquare/src/screens/Home.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { styles } from './styles/AppStyles';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -13,6 +13,7 @@ import ModePicker from '../components/ScrollingPicker';
 
 function Home(){
   const dispatch = useDispatch();
+  const [mode, setMode] = useState(0);
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', () => {return true});
@@ -50,7 +51,10 @@ function Home(){
           </Text>
         </View>
         <View style={[styles.flex, styles.centeredSelf]}>
-          <ModePicker />
+          <ModePicker modeSetter={setMode}/>
+          <Text style={[styles.largeFont, styles.darkText, styles.centeredText]}>
+            {mode === 0 ? 'Squares' : 'Addition'}
+          </Text>
         </View>
       </View>
       <View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}>

squarenotsquare/src/screens/styles/AppStyles.js

@@ -85,6 +85,10 @@ export const styles = StyleSheet.create({
     marginBottom: Metrics.margins.buttonMargin,
     marginTop: Metrics.margins.buttonMargin
   },
+  modePickerMargin: {
+    marginLeft: Metrics.icons.buttonIcon * 0.5,
+    marginRight: Metrics.icons.buttonIcon * 0.5
+  },
 
   footer: {
     margin: Metrics.margins.default,