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

import React from "react"
import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image } 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"

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,
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    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: 150
  },
  header: {
    width: "100%"
  }
})

class Splash extends React.Component {

  state = {
    bannerExpanded: true,
    timer: maxTime
  }

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

  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 (
      <View style={styles.container} >
        <View style={styles.headerContainer} >
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>

        <SafeAreaView style={styles.safearea}>
          <View>
            <ButtonContainer>
              <Button
                text={texts.section_quizzes}
                isBig={false}
                onPress={() =>
                  this.props.navigation.navigate("QuizIndex", {
                    title: texts.section_quizzes,
                    color: colors.blue
                  })}
              />

              <Button
                text={texts.exam}
                subtitle={`(${texts.exam_simulation})`}
                isBig={false}
                onPress={() =>
                  this.props.navigation.navigate("Exam", {
                    title: texts.exam,
                    questions: examQuestions,
                    color: colors.blue
                  })}
              />
            </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>
      </View>
    )
  }
}

export default Splash