WeatherApp/Weekday.js at master · joanmarch/WeatherApp · 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
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import {Icon} from 'react-native-elements';


export default class Weekday extends React.Component{
    state ={
        date : "",
        hour : "",
     }


  componentDidMount() {
    setInterval( () => {
        var d = new Date();
        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var month = months[d.getMonth()];
        var day = d.getDate();
        var hour = d.getHours ();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var weekday = weekdays[d.getDay()];
        this.setState({
        //Setting the value of the date time
        date: day + " " + month + " / " + weekday,
        hour : hour + ":" + minutes + ":" + seconds
        });
      },1000)
  }


  render(){

      return(
        <View style={styles.box1}>
                <View style = {styles.icon}>
                   <Icon
                     name='room'
                     type='material'
                     color='white'
                    />
                </View>
                <View style={styles.date}>
                   <Text style={styles.text}>{this.state.date}</Text>
                </View>
                <View style={styles.hour}>
                   <Text style={styles.text}>{this.state.hour}</Text>
                </View>
        </View>

      )
    }


}

const styles = StyleSheet.create({

    date:{
        alignSelf: 'stretch',
      },
      hour:{
        // alignSelf: 'flex-end',
        // width: 60,
      },
      icon:{
        alignSelf: 'flex-start',
      },
      text:{
        // fontSize:20,
         color:'white'
       },
      box1:{
        flexDirection:'row',
        justifyContent:'space-around',
        flex : 1,

      }
    })