FitTrack/DoneScreen.js at main · CoderCaleb/FitTrack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import {
    StyleSheet,
    Text,
    View,
    SafeAreaView,
    Image,
    Platform,
    StatusBar,
    Button,
    TouchableOpacity,
  } from "react-native";
  import { useState, useEffect, useRef } from "react";
  import ConfettiCannon from 'react-native-confetti-cannon'
export default function DoneScreen(props) {
  const [dataTime,setDataTime] = useState(443)
  useEffect(()=>{
    console.log('DataTime: ',props.route.params.workouts)
    setDataTime(props.route.params.dataTime)

  },[props.route.params['dataTime']])
    return (
      <SafeAreaView style={styles.container}>
        <ConfettiCannon count={200} fadeOut={true} origin={{x: -10, y: 0}}/>
        <Image source={require('./assets/images/throphy.png')} style={styles.throphyImg}></Image>
        <Text style={styles.congratulateText}>Congratulations!</Text>
        <Text style={styles.subText}>You have completed the workout!</Text>
        <View style={styles.mainResultContainer}>

          <View style={styles.resultContainer}>
            <Text style={styles.titleText}>{dataTime}</Text>
            <Text style={styles.subText}>Minutes</Text>
          </View>
          <View style={styles.resultContainer}>
            <Text style={styles.titleText}>{props.route.params['workouts'][0][props.route.params.data].length}</Text>
            <Text style={styles.subText}>Workouts Completed</Text>
          </View>
        </View>
        <TouchableOpacity style={styles.homeButton} onPress={()=>props.navigation.push('HomeScreen')}><Text style={styles.text}>Home</Text></TouchableOpacity>
      </SafeAreaView>
    );
  }

  const styles = StyleSheet.create({
    throphyImg:{
        width:300,
        height:300
      },
      homeButton:{
        width:"80%",
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#6540ea',
        borderRadius:100,
        height:50
      },
      titleText:{
        color: "white",
        fontSize: 30,
      },
      mainResultContainer:{
        flexDirection:'row',
        width: '90%'
      },
      resultContainer:{
        flex:1,
        alignItems:'center',
        gap:10
      },
      subText:{
        color: "white",
        fontSize: 14,
        marginBottom:50
      },
      congratulateText:{
        color:'#6540ea',
        fontSize: 30,
        marginBottom:15
      },
      text: {
        color: "white",
        fontSize: 18,
      },
      container: {
        flex: 1,
        backgroundColor: "#010f2a",
        alignItems: "center",
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
      },


  });