squarenotsquare/squarenotsquare/src/screens/Home.js

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';
import Icons from '../themes/Icons';
import Colors from "../themes/Colors";
import Metrics from "../themes/Metrics";
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();
  const [mode, setMode] = useState(0);

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', () => {return true});
  }, [])

  function onPressStart(){
    dispatch(squareStartPressed());
  }

  function onPressHighScores(){
    dispatch(goToScores());
  }

  const now = new Date(Date.now());

  return (
    <SafeAreaView style={[styles.flex]}>
      <TouchableOpacity style={[styles.endAlign]}>
        <MaterialIcon
          name={Icons.squareIcons.settings}
          color={Colors.material.green400}
          size={Metrics.icons.buttonIcon}
        />
      </TouchableOpacity>
      <View style={[styles.flexHalf, styles.spaceEvenly]}>
        <View style={styles.flex}>
          <Text style={[styles.boldText, styles.headerTitleFont, styles.centeredText, styles.darkText]}>
            Square
            <Text style={[styles.green, styles.headerTitleFont, styles.centeredText, styles.lightText]}>
              {' not '}
            </Text>
            <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
              Square
            </Text>
          </Text>
        </View>
        <View style={[styles.flex, styles.centeredSelf]}>
          <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]}>
        <Slider origin={400} duration={750} delay={0}>
          <TouchableOpacity
            onPress={onPressStart}
            style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}
          >
            <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
              Start
            </Text>
          </TouchableOpacity>
        </Slider>
        <Slider origin={400} duration={750} delay={100}>
          <TouchableOpacity
            onPress={onPressHighScores}
            style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]}
          >
            <Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}>
              High Scores
            </Text>
          </TouchableOpacity>
        </Slider>
      </View>
      <View style={[styles.footer, styles.centeredJustify]}>
        <Text style={[styles.greyText, styles.tinyFont, styles.centeredText]}>
          0.0.1a    Atonal Software    {now.toDateString()}
        </Text>
      </View>
    </SafeAreaView>
  )
}

export default Home;