Countdown button

components/Clocks.js

@@ -126,7 +126,7 @@ export class CountDownClockHorizontal extends BaseClock {
     return (
       <View style={styles.container}>
         <Grid>
-          <Row size={25}>
+          <Row size={20}>
             <PsycheText style={styles.countDownTitle}>
               {this.state.clockTitle}
             </PsycheText>

package.json

@@ -15,6 +15,7 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
     "react-native-collapsible": "^0.10.0",
     "react-native-easy-grid": "^0.1.17",
+    "react-native-floating-action": "^1.10.1",
     "react-native-tab-view": "^0.0.74",
     "react-navigation": "^1.0.0-beta.21"
   },

screens/HomeScreen.js

@@ -20,6 +20,7 @@ import { ImagePicker, WebBrowser } from "expo";
 import countdown from "../util/countdown";
 import Dates from "../constants/Dates";
 import Colors from "../constants/Colors";
+import { FloatingAction } from 'react-native-floating-action';
 import { PsycheText } from "../components/StyledText";
 import { connectActionSheet } from '@expo/react-native-action-sheet';
 
@@ -83,8 +84,6 @@ export default class HomeScreen extends React.Component {
       aspect: [4, 3]
     });
 
-    console.log(result);
-
     if (!result.cancelled) {
       this.props.navigation.navigate("Modal", {
         image: result.uri
@@ -115,30 +114,14 @@ export default class HomeScreen extends React.Component {
   }
 
   render() {
-    let countdown = this.state.countdown ? this.state.countdown : {};
-    let horizontalCountdown = this.state.horizontalCountdown;
-    /**
-     *  In the future this file will have the preloading/caching for images
-     *  and assets since it is the home screen. That'll most likely make this
-     *  code irrelevant since the splash screen will be displayed, but good
-     *  to have incase the loading is finished before the countdown is ready.
-     **/
+    const countdown = this.state.countdown ? this.state.countdown : {};
+    const horizontalCountdown = this.state.horizontalCountdown;
 
     if (!this.state.countdown) {
       return <View style={styles.loading} />;
     }
     return (
       <View style={styles.container}>
-        <TouchableOpacity
-          style={styles.timelineButton}
-          onPress={() => {
-            this.setState({ horizontalCountdown: !horizontalCountdown });
-          }}
-        >
-          <PsycheText style={{ color: "#fff" }}>
-            4 Years Until Launch
-          </PsycheText>
-        </TouchableOpacity>
         {!horizontalCountdown && (
           <CountDownClockVertical countDownDate={Dates.launch} />
         )}
@@ -162,8 +145,17 @@ export default class HomeScreen extends React.Component {
                 countDownDate={Dates.arrival}
               />
             </Row>
+            <Row size={10} />
           </Grid>
         )}
+        <FloatingAction
+          actions={[]}
+          color={Colors.primaryColor}
+          showBackground={false}
+          onPressMain={() => {
+            this.setState({ horizontalCountdown: !horizontalCountdown });
+          }}
+        />
       </View>
     );
   }
@@ -177,21 +169,5 @@ const styles = StyleSheet.create({
   loading: {
     flex: 1,
     backgroundColor: "#fff"
-  },
-  timelineButton: {
-    ...Platform.select({
-      ios: {
-        shadowColor: "black",
-        shadowOffset: { height: 3 },
-        shadowOpacity: 0.1,
-        shadowRadius: 3
-      },
-      android: {
-        elevation: 20
-      }
-    }),
-    alignItems: "center",
-    backgroundColor: Colors.primaryColor,
-    paddingVertical: 20
   }
 });