Faded picker

squarenotsquare/src/components/ScrollingPicker.js

@@ -8,11 +8,10 @@ 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";
+import Fade from "./Fade";
 
 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) {
@@ -40,18 +39,22 @@ function ScrollingPicker(props) {
       onScroll={onScroll}
       scrollEventThrottle={0}
     >
-      <MaterialIcon
-        name={Icons.squareIcons.square}
-        color={Colors.material.dark}
-        size={Metrics.icons.buttonIcon}
-        style={styles.modePickerMargin}
-      />
-      <MaterialIcon
-        name={Icons.squareIcons.plus}
-        color={Colors.material.dark}
-        size={Metrics.icons.buttonIcon}
-        style={styles.modePickerMargin}
-      />
+      <Fade faded={props.mode !== 0} duration={250}>
+        <MaterialIcon
+          name={Icons.squareIcons.square}
+          color={Colors.material.dark}
+          size={Metrics.icons.buttonIcon}
+          style={styles.modePickerMargin}
+        />
+      </Fade>
+      <Fade faded={props.mode !== 1} duration={250}>
+        <MaterialIcon
+          name={Icons.squareIcons.plus}
+          color={Colors.material.dark}
+          size={Metrics.icons.buttonIcon}
+          style={styles.modePickerMargin}
+        />
+      </Fade>
     </ScrollView>
   );
 }

squarenotsquare/src/screens/Home.js

@@ -51,7 +51,7 @@ function Home(){
           </Text>
         </View>
         <View style={[styles.flex, styles.centeredSelf]}>
-          <ModePicker modeSetter={setMode}/>
+          <ModePicker mode={mode} modeSetter={setMode}/>
           <Text style={[styles.largeFont, styles.darkText, styles.centeredText]}>
             {mode === 0 ? 'Squares' : 'Addition'}
           </Text>