vds_quiz/vds-app/App/screens/Splash.js

import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, Alert, BackHandler } from "react-native"
import { AdMobBanner } from "expo-ads-admob"

import { Button, ButtonContainer } from "../components/Button"
import { colors, texts, credentials } from "../components/Variables"
import { examQuestions } from "../components/ExamQuestions"
import { trueFalseQuestions } from "../components/TrueFalseQuestions"

const screen = Dimensions.get("window")
const header = require("../assets/header.png")
const maxTime = 0 // 10
let interval = null

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark_blue,
    flex: 1
  },
  bannerContainer: {
    backgroundColor: colors.dark_blue,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  bannerExpanded: {
    backgroundColor: colors.dark_blue,
    height: screen.height-230
  },
  bannerCollapsed: {
    backgroundColor: colors.dark_blue,
    height: 300
  },
  banner: {
    width: 300,
    height: 250,
    marginVertical: 20
  },
  title: {
    color: colors.white,
    fontSize: 25,
    textAlign: "center",
    fontWeight: "600",
    paddingVertical: 20
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "400",
    paddingVertical: 20,
    marginTop: 20,
  },
  timer: {
    color: colors.white,
    fontSize: 30,
    textAlign: "center",
    fontWeight: "600",
    paddingVertical: 20,
    marginBottom: 20,
  },
  safearea: {
    flex: 1,
    marginTop: 0,
    justifyContent: "space-between",
    paddingHorizontal: 20
  },
  headerContainer: {
    marginTop: 0,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 200
  },
  header: {
    width: "100%"
  }
})

class Splash extends React.Component {

  state = {
    bannerExpanded: true,
    timer: maxTime
  }

  bannerError = (e) => {
    //console.log("Banner error: ", e)
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
  }

  handleBackButton = () => {
    Alert.alert(
      texts.exit,
      texts.exitQuestion,
      [
        {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'Si', onPress: () => BackHandler.exitApp()},
      ],
      { cancelable: false }
    )
    return true
  }

  render() {

    if(this.state.timer==maxTime) {
      interval = setInterval( () => {
        this.setState( (state) => {
          return {
            timer: this.state.timer-1,
          }
        })
      }, 1000)
    }

    if(this.state.timer < 1) {
      clearInterval(interval)
      setTimeout( () => {
        this.setState( (state) => {
          return {
            bannerExpanded: false
          }
        })
      }, 500)
    }

    return (
      <ScrollView style={styles.container} >
        <View style={styles.headerContainer} >
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>

        <SafeAreaView style={styles.safearea}>
          <View>
            <ButtonContainer isBoxed={true}>
              <Button
                text={texts.section_quizzes}
                subtitle={`(${texts.section_quizzes_subtitle})`}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                color={colors.white_alpha}
                onPress={() =>
                  this.props.navigation.navigate("QuizIndex", {
                    title: texts.section_quizzes,
                    color: colors.white_alpha
                  })}
              />
              <Button
                text={texts.exam}
                subtitle={`(${texts.exam_simulation})`}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                color={colors.white_alpha}
                onPress={() =>
                  this.props.navigation.navigate("Exam", {
                    title: texts.exam,
                    questions: this.props.navigation.getParam("examQuestions") || examQuestions,
                    color: colors.white_alpha
                  })}
              />

              <Button
                text={texts.trueFalse}
                subtitle={`(${texts.trueFalseSubtitle})`}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                color={colors.white_alpha}
                onPress={() =>
                  this.props.navigation.navigate("TrueFalse", {
                    title: texts.trueFalse,
                    questions: this.props.navigation.getParam("trueFalseQuestions") || trueFalseQuestions,
                    color: colors.white_alpha
                  })}
              />
              <Button
                text={texts.dictionaryTitle}
                subtitle={`(${texts.dictionarySubtitle})`}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Dictionary", {})}
              />
              <Button
                text={texts.infoTitle}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                color={colors.white_alpha}
                onPress={() => this.props.navigation.navigate("Info", {})}
              />
              <Button
                text={texts.exit}
                isBig={false}
                noPadding={true}
                hasShadow={true}
                noBorder={true}
                color={colors.white_alpha2}
                onPress={() => this.handleBackButton()}
              />

            </ButtonContainer>
          </View>

        </SafeAreaView>
        <View style={[styles.bannerContainer, !this.state.bannerExpanded ? styles.bannerCollapsed  : {}]}>
          <AdMobBanner
            style={styles.banner}
            bannerSize="mediumRectangle"
            adUnitID={credentials.adMobUnitID}
            onDidFailToReceiveAdWithError={this.bannerError} />

          {
            this.state.bannerExpanded ? (
              <Text style={styles.timer}>{this.state.timer}</Text>
            ) : null
          }
        </View>
      </ScrollView>
    )
  }
}

export default Splash