created icon library and displayed weather data

src/hooks/useLocation.js

@@ -1,12 +1,10 @@
 import { useEffect, useState } from 'react';
 import * as Location from 'expo-location';
-import useWeatherData from './useWeatherData';
-import weatherApi from '../api/weatherApi';
 
 export default useLocation = () => {
     const [location, setLocation] = useState(null);
     const [errorMsg, setErrorMsg] = useState(null);
-    const [weatherData, setWeatherData] = useState(null);
+    const [latLongVal, setLatLongVal] = useState(null);
 
     useEffect(() => {
         ( async() => {
@@ -22,21 +20,14 @@ export default useLocation = () => {
                 longitude: locationGeocode.coords.longitude
             }
 
+            setLatLongVal(latLong);
+
             const location = await Location.reverseGeocodeAsync(latLong);
             setLocation(location[0]);
 
-            const response = await weatherApi.get('/weather', {
-                params: {
-                    lat: latLong.latitude,
-                    lon: latLong.longitude,
-                    appid: `c776ce7eea8b6d63b9e40639a6fc1120`
-                }
-            })
-            setWeatherData(response.data);
-
         })()
     }, []);
 
 
-    return [ location, errorMsg, weatherData ];
+    return [ location, errorMsg, latLongVal ];
 }

src/hooks/useWeatherData.js

@@ -2,23 +2,42 @@ import { useEffect, useState } from 'react';
 import weatherApi from '../api/weatherApi';
 
 
-export default useWeatherData = ({ latitude, longitude }) => {
+export default useWeatherData = (latLong) => {
 
     const [weatherData, setWeatherData] = useState(null);
 
     useEffect(() => {
-        (async() => {
-            const response = await weatherApi.get('/weather', {
-                params: {
-                    lat: latitude,
-                    lon: longitude,
-                    appid: `c776ce7eea8b6d63b9e40639a6fc1120`
+
+        if(latLong) {
+            (async() => {
+
+                const { latitude, longitude } = latLong;
+
+                const response = await weatherApi.get('/weather', {
+                    params: {
+                        lat: latitude,
+                        lon: longitude,
+                        appid: `c776ce7eea8b6d63b9e40639a6fc1120`,
+                        units: 'metric'
+                    }
+                })
+
+                const filteredData = {
+                    humidity: response.data.main.humidity,
+                    pressure: Math.round(response.data.main.pressure),
+                    temp: (response.data.main.temp).toFixed(1),
+                    tempMax: Math.round(response.data.main.temp_max),
+                    tempMin: Math.round(response.data.main.temp_min),
+                    icon: response.data.weather[0].icon,
+                    windSpeed: Math.round(response.data.wind.speed * 2.23694),
+
                 }
-            })
-        })();
+
+                setWeatherData(filteredData);
+            })();
+        }
 
-        setWeatherData(response);
-    }, []);
+    }, [latLong]);
 
     return [ weatherData ];
 }

src/screens/DriverInfoScreen.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, View, Image, ImageBackground, Text, StatusBar, Dimensions } from 'react-native';
-import { FontAwesome5 } from '@expo/vector-icons';
+import { FontAwesome5, Ionicons } from '@expo/vector-icons';
 import Animated, { interpolate, set } from 'react-native-reanimated';
 import { useTimingTransition } from 'react-native-redash/lib/module/v1';
+import weatherIconDictionary from '../utils/weatherIconDictionary';
 
 const DEVICE_WIDTH = Dimensions.get('window').width;
 const HALF_WIDTH = DEVICE_WIDTH / 2;
@@ -16,6 +17,7 @@ const DriverInfoScreen = ({ navigation }) => {
     const [ city, setCity] = useState('');
     const [ area, setArea ] = useState('');
     const [ date, setDate ] = useState('');
+    const [ weatherData, setWeatherData ] = useState(null);
 
     const [ animationSequence, setAnimationSequence ] = useState(0);
 
@@ -46,14 +48,16 @@ const DriverInfoScreen = ({ navigation }) => {
 
     useEffect(() => {
 
-        const { name, profilePhoto } = navigation.state.params.user;
-        const { region, street } = navigation.state.params.location;
+        const { user, location, dateString, weatherData } = navigation.state.params;
+        const { name, profilePhoto } = user;
+        const { region, street } = location;
         const firstName = name.split(' ')[0];
         setDriverFirstName(firstName);
         setDriverImage(profilePhoto);
         setCity(region);
         setArea(street);
-        setDate(navigation.state.params.dateString);
+        setDate(dateString);
+        setWeatherData(weatherData);
 
     }, [])
 
@@ -165,17 +169,24 @@ const DriverInfoScreen = ({ navigation }) => {
                     <Text style={styles.area}>{area}</Text>
                     <Text style={styles.dateTime}>{date}</Text>
                     <View style={styles.weatherDisplay}>
-                        <FontAwesome5 name="cloud-rain" size={48} color="white" />
-                        <Text style={styles.temperature}>28℃</Text>
+                        { weatherIconDictionary[weatherData.icon].iconFamily === 'FontAwesome5' ?
+                            <FontAwesome5 name={weatherIconDictionary[weatherData.icon].icon} 
+                                size={48} color="white" 
+                            /> :
+                            <Ionicons name={weatherIconDictionary[weatherData.icon].icon} 
+                                size={48} color="white" 
+                            />
+                        }
+                        <Text style={styles.temperature}>{weatherData.temp}℃</Text>
                     </View>
                     <View style={styles.weatherUpdate}>
                         <View style={styles.weatherBox}>
                             <Text style={styles.title}>HIGH/LOW</Text>
-                            <Text style={styles.value}>28°/30°</Text>
+                            <Text style={styles.value}>{weatherData.tempMax}°/{weatherData.tempMin}°</Text>
                         </View>
                         <View style={styles.weatherBox}>
                             <Text style={styles.title}>WIND</Text>
-                            <Text style={styles.value}>5 MPH</Text>
+                            <Text style={styles.value}>{weatherData.windSpeed} MPH</Text>
                         </View>
                     </View>
                     <View style={styles.weatherUpdate}>
@@ -185,7 +196,7 @@ const DriverInfoScreen = ({ navigation }) => {
                         </View>
                         <View style={styles.weatherBox}>
                             <Text style={styles.title}>HUMIDITY</Text>
-                            <Text style={styles.value}>65%</Text>
+                            <Text style={styles.value}>{weatherData.humidity}%</Text>
                         </View>
                     </View>
                 </Animated.View>

src/screens/WelcomeScreen.js

@@ -3,27 +3,28 @@ import { ImageBackground, Text, View, StyleSheet, StatusBar, Image } from 'react
 import { Context as DriverContext } from '../context/DriverContext';
 import useLocation from '../hooks/useLocation';
 import useDate from '../hooks/useDate';
+import useWeatherData from '../hooks/useWeatherData';
 
 
 const WelcomeScreen = ({ navigation }) => {
 
     const { state: { user } } = useContext(DriverContext);
-    const [ location, errorMsg, weatherData ] = useLocation();
+    const [ location, errorMsg, latLongVal ] = useLocation();
     const [ dateString ] = useDate();
+    const [ weatherData ] = useWeatherData(latLongVal);
 
 
     useEffect(() => {
 
-        if(user && location) {
+        if(user && location && weatherData) {
             console.log(location);
             setTimeout(() => {
-                navigation.navigate('DriverInfo', { user, location, dateString });
-            }, 3000)
+                navigation.navigate('DriverInfo', { user, location, dateString, weatherData });
+            }, 1500)
         }
 
-    }, [user, location])
+    }, [user, location, weatherData]);
 
-    console.log(weatherData);
 
     return (
         <ImageBackground source={require('../../assets/welcome-background.png')}

src/utils/weatherIconDictionary.js

@@ -0,0 +1,67 @@
+
+export default {
+    "01d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-sunny'
+    },
+    "01n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-sunny'
+    },
+    "02d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-partly-sunny',
+    },
+    "02n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-partly-sunny',
+    },
+    "03d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-cloud',
+    },
+    "03n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-cloud',
+    },
+    "04d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-cloudy',
+    },
+    "04n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-cloudy-night',
+    },
+    "09d": {
+        iconFamily: 'FontAwesome5',
+        icon: 'cloud-rain',
+    },
+    "09n": {
+        iconFamily: 'FontAwesome5',
+        icon: 'cloud-rain',
+    },
+    "10d": {
+        iconFamily: 'FontAwesome5',
+        icon: 'cloud-sun-rain',
+    },
+    "10n": {
+        iconFamily: 'FontAwesome5',
+        icon: 'cloud-moon-rain'
+    },
+    "11d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-thunderstorm',
+    },
+    "11n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-thunderstorm',
+    },
+    "13d": {
+        iconFamily: 'Ionicons',
+        icon: 'md-snow'
+    },
+    "13n": {
+        iconFamily: 'Ionicons',
+        icon: 'md-snow'
+    },
+}