Its Twelve

skiser · Oct 30, 2019 · ccfb0e3 · ccfb0e3
1 parent 991c844
commit ccfb0e3
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/Routinely/app/screens/alarmRinging.js b/Routinely/app/screens/alarmRinging.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {View, StyleSheet, Button, Text} from 'react-native';
+import {View, StyleSheet, Button, Text, Image} from 'react-native';
 import DisplayTime from '../components/alarmRinging_components/DisplayTime';
 
 class AlarmRingingScreen extends Component {
@@ -8,8 +8,11 @@ class AlarmRingingScreen extends Component {
     this.state = {
       dataSource: [],
       loading: true,
+      relativePath: 'Routinely/app/components/img/icons/',
+      png: '.png',
     };
   }
+
   componentDidMount(): void {
     fetch(
       'https://weatherbit-v1-mashape.p.rapidapi.com/forecast/hourly?lang=en&hours=12&units=I&lat=39.9625984&lon=-76.727745',
@@ -33,15 +36,23 @@ class AlarmRingingScreen extends Component {
           temperatureNow: responseJson.data[0].temp,
           precipitationNow: responseJson.data[0].precip,
           weatherConditionsNow: responseJson.data[0].weather.description,
+          weatherConditionsNowCode: responseJson.data[0].weather.icon,
 
           temperature6Hrs: responseJson.data[5].temp,
           precipitation6Hrs: responseJson.data[5].precip,
           weatherConditions6Hrs: responseJson.data[5].weather.description,
+          weatherConditions6HrsCode: responseJson.data[5].weather.icon,
 
           temperature12Hrs: responseJson.data[11].temp,
           precipitation12Hrs: responseJson.data[11].precip,
           weatherConditions12Hrs: responseJson.data[11].weather.description,
+          weatherConditions12HrsCode: responseJson.data[11].weather.icon,
+          weatherNowIconLink:
+            this.state.relativePath +
+            responseJson.data[0].weather.icon +
+            this.state.png,
         });
+        console.log('Now', this.state.weatherNowIconLink);
       })
       .catch(error => console.log(error)); //to catch the errors if any
   }
@@ -55,6 +66,7 @@ class AlarmRingingScreen extends Component {
         <View style={styles.row}>
           <View style={styles.forecast}>
             <Text style={styles.time}>Right Now</Text>
+            <Image style={styles.img} source={{uri: this.state.weatherNowIconLink}} />
             <Text style={styles.conditions}>
               {this.state.weatherConditionsNow}
             </Text>
@@ -65,6 +77,10 @@ class AlarmRingingScreen extends Component {
           </View>
           <View style={styles.forecast}>
             <Text style={styles.time}>6 Hrs</Text>
+            <Image
+              style={styles.img}
+              source={require('Routinely/app/components/img/icons/r04d.png')}
+            />
             <Text style={styles.conditions}>
               {this.state.weatherConditions6Hrs}
             </Text>
@@ -75,8 +91,11 @@ class AlarmRingingScreen extends Component {
           </View>
           <View style={styles.forecast}>
             <Text style={styles.time}>12 Hrs</Text>
+            <Image
+              style={styles.img}
+              source={require('Routinely/app/components/img/icons/s02d.png')}
+            />
             <Text style={styles.conditions}>
-              {' '}
               {this.state.weatherConditions12Hrs}
             </Text>
             <Text style={styles.temp}>Temp {this.state.temperature12Hrs}</Text>
@@ -109,7 +128,7 @@ const styles = StyleSheet.create({
   forecast: {
     textAlign: 'center',
     flexDirection: 'column',
-    padding: 5,
+    padding: 0,
     margin: 10,
     borderWidth: 1,
     borderRadius: 15,
@@ -129,8 +148,12 @@ const styles = StyleSheet.create({
   conditions: {
     textAlign: 'center',
     fontSize: 12,
-      paddingBottom: 3,
-      paddingTop: 3,
+    paddingBottom: 3,
+    paddingTop: 3,
+  },
+  img: {
+    width: 100,
+    height: 100,
   },
 });