Scroll picker width

squarenotsquare/src/components/ScrollingPicker.js

@@ -16,7 +16,7 @@ function ScrollingPicker() {
   function onScroll(event){
     if (event.nativeEvent.contentOffset.x === 0) {
       setSelected(0);
-    } else if (event.nativeEvent.contentOffset.x === Metrics.icons.buttonIcon) {
+    } else if (event.nativeEvent.contentOffset.x === (Metrics.icons.buttonIcon * 2)) {
       setSelected(1);
     }
     Animated.event([
@@ -43,11 +43,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}}
       />
       <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}}
       />
     </ScrollView>
   );

squarenotsquare/src/screens/styles/AppStyles.js

@@ -112,7 +112,7 @@ export const styles = StyleSheet.create({
   },
 
   modePicker: {
-    width: Metrics.icons.buttonIcon,
+    width: Metrics.icons.buttonIcon * 2,
     overflow: "visible"
   },