working-setup

weather-app/react-native/App.js

@@ -1,21 +1,68 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View, SafeAreaView,StatusBar } from 'react-native';
+import WeatherUi from './components/WeatherUi';
+
+const API_KEY = 'c5212ff223c381bf600ca14a06be152c'
+
 
 export default function App() {
+
+  const [weatherData, setWeatherData] = useState(null)
+  const [loaded, setLoaded] = useState(true)
+
+  async function fetchWeather(cityName){
+    setLoaded(false)
+    const API = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=metric`
+    try{
+      const response = await fetch(API)
+      if(response.status == 200){
+        const data = await response.json()
+        setWeatherData(data)
+      } else {
+        setWeatherData(null)
+      }
+      setLoaded(true)
+    } catch (error){
+      console.log(error)
+    }
+  }
+
+  useEffect(() =>{
+    fetchWeather('Kharagpur');
+    // console.log(weatherData)
+  },[])
+
+  if(!loaded){
+    return(
+      <SafeAreaView style={styles.activityContainer}>
+        <ActivityIndicator color='white' size={36} />
+      </SafeAreaView>
+    )
+  } else if(weatherData == null){
+    return(
+      <View></View>
+    )
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Setup</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaView style={styles.container}>
+      <WeatherUi weatherData={weatherData} />
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    marginTop: StatusBar.currentHeight || 0,
+    alignItems:'center',
+    backgroundColor:'#686bcc'
   },
+  activityContainer:{
+    flex: 1,
+    marginTop: StatusBar.currentHeight || 0,
+    alignItems:'center',
+    backgroundColor:'#979797',
+    justifyContent:'center',
+  }
 });

weather-app/react-native/assets/index.js

@@ -0,0 +1,13 @@
+const clouds = require('./icons/clouds.png')
+const clearM = require('./icons/clearM.png')
+const dust = require('./icons/dust.png')
+const haze = require('./icons/haze.png')
+const mist = require('./icons/mist.png')
+const moon = require('./icons/moon.png')
+const rain = require('./icons/rain.png')
+const sand = require('./icons/sand.png')
+const snow = require('./icons/snow.png')
+const thunderstrome = require('./icons/thunderstrome.png')
+const tornado = require('./icons/tornado.png')
+
+export {tornado,thunderstrome,snow,sand,rain,moon,mist,haze,dust,clearM,clouds  }

weather-app/react-native/components/SearchBar.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+const SearchBar = () => {
+    return (
+        <View>
+            <Text>Search bar</Text>
+        </View>
+    )
+}
+
+export default SearchBar

weather-app/react-native/components/WeatherUi.jsx

@@ -0,0 +1,142 @@
+import React, {useState, useEffect} from 'react'
+import { View, Text, StyleSheet, Dimensions, Image } from 'react-native'
+import SearchBar from './SearchBar'
+import {tornado,thunderstrome,snow,sand,rain,moon,mist,haze,dust,clearM,clouds} from '../assets/index'
+
+
+const monthNames = ["January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+
+const getCurrentDate=()=>{
+    const d = new Date();
+    let date = d.getDate();
+    let month = monthNames[d.getMonth()]
+    let year = d.getFullYear();
+
+    //Alert.alert(date + ' ' + month + ' ' + year);
+    // You can turn it in to your desired format
+    return date + ' ' + month + ' ' + year;//format: dd-mm-yyyy;
+}
+
+const hours = new Date().getHours();
+
+const WeatherUi = ({weatherData}) => {
+
+    const [Wicon, setWicon] = useState(null)
+    const {weather,
+            name,
+            main:{temp,humidity,pressure},
+            wind:{speed}
+    } = weatherData
+    const [{main, description}] = weather
+
+    function getWicon(weather){
+        if(weather === 'Tornado') return tornado
+        if(weather === 'Thunderstorm') return thunderstrome
+        if(weather === 'Snow') return snow
+        if(weather === 'Sand') return sand
+        if(weather === 'Rain') return rain
+        if(weather === 'Clear' && hours>12) return moon
+        if(weather === 'Mist') return mist
+        if(weather === 'Haze') return haze
+        if(weather === 'Dust') return dust
+        if(weather === 'Clear'&& hours<=12) return clearM
+        if(weather === 'Clouds') return clouds
+        return haze
+    }
+
+    useEffect(()=>{
+        setWicon(getWicon(main))
+    },[weatherData])
+
+
+
+
+    return (
+        <View style={styles.container}>
+            {/* search-bar */}
+            {/* cityname */}
+            <View style={styles.sub1}>
+                <Text style={{fontSize:26, fontWeight:'bold',color:'white'}}>{name}</Text>
+                <Text style={{fontSize:16, marginVertical:6,color:'white'}}>{getCurrentDate()}</Text>
+            </View>
+            {/* today's date */}
+            {/* weather-icon main descp temp ->column*/}
+            <View style={styles.sub2}>
+                <Image source={Wicon} style={styles.icons} resizeMode='contain' />
+                <Text style={{fontSize:26, fontWeight:'bold',color:'white'}}>{main}</Text>
+                <Text style={{fontSize:20, marginVertical:6,color:'white'}}>{description}</Text>
+                <Text style={{fontSize:24, fontWeight:'bold',color:'white'}}>{temp}°C</Text>
+            </View>
+            {/* min-temp max-temp  wind  humidity ->row*/}
+            <View style={styles.sub3}>
+                <View style={styles.rowBox}>
+                    <Text style={{fontSize:16, fontWeight:'bold',color:'white'}}>Pressure</Text>
+                    <View style={styles.subBox}>
+                    <Text style={{fontSize:16, marginVertical:4,color:'white',marginRight:2}}>{pressure}</Text>
+                    <Text style={{fontSize:16, fontWeight:'bold',color:'white'}}>hPa</Text>
+                    </View>
+                </View>
+                <View style={styles.rowBox}>
+                    <Text style={{fontSize:16,color:'white', fontWeight:'bold'}}>Wind Speed</Text>
+                    <View style={styles.subBox}>
+                    <Text style={{fontSize:16, marginVertical:4, marginRight:2,color:'white'}}>{speed}</Text>
+                    <Text style={{fontSize:16, fontWeight:'bold',color:'white'}}>m/s</Text>
+                    </View>
+                </View>
+                <View style={styles.rowBox}>
+                    <Text style={{fontSize:16,color:'white', fontWeight:'bold'}}>Humidity</Text>
+                    <View style={styles.subBox}>
+                    <Text style={{fontSize:16, marginVertical:4,color:'white',marginRight:2}}>{humidity}</Text>
+                    <Text style={{fontSize:16, fontWeight:'bold',color:'white'}}>%</Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      marginTop:40,
+    },
+    sub1:{
+        justifyContent:'center',
+        alignItems:'center'
+    },
+    sub2:{
+        flex:1,
+        alignItems:'center',
+        marginTop:12,
+        justifyContent:'center'
+    },
+    icons:{
+        width:150,
+        height:150,
+        marginBottom:6,
+    },
+    sub3:{
+        flexDirection:'row',
+        alignItems:'center',
+        marginBottom:40,
+    },
+    rowBox:{
+        // width:80, 
+        alignItems:'center',
+        justifyContent:'center',
+        marginHorizontal:10,
+        width: Dimensions.get('screen').width/3.6,
+        backgroundColor:'#4b4e9e',
+        borderRadius:12,
+        padding:8,
+    },
+    subBox:{
+       flexDirection:'row',
+        alignItems:'center',
+    }
+  });
+
+
+export default WeatherUi