diff --git a/weather-app/react-native/App.js b/weather-app/react-native/App.js
index e8e0e65..6b4bdf6 100644
--- a/weather-app/react-native/App.js
+++ b/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(
+
+
+
+ )
+ } else if(weatherData == null){
+ return(
+
+ )
+ }
+
return (
-
- Setup
-
-
+
+
+
);
}
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',
+ }
});
diff --git a/weather-app/react-native/assets/icons/clearM.png b/weather-app/react-native/assets/icons/clearM.png
new file mode 100644
index 0000000..92b601e
Binary files /dev/null and b/weather-app/react-native/assets/icons/clearM.png differ
diff --git a/weather-app/react-native/assets/icons/clouds.png b/weather-app/react-native/assets/icons/clouds.png
new file mode 100644
index 0000000..16359ac
Binary files /dev/null and b/weather-app/react-native/assets/icons/clouds.png differ
diff --git a/weather-app/react-native/assets/icons/dust.png b/weather-app/react-native/assets/icons/dust.png
new file mode 100644
index 0000000..baa36ad
Binary files /dev/null and b/weather-app/react-native/assets/icons/dust.png differ
diff --git a/weather-app/react-native/assets/icons/haze.png b/weather-app/react-native/assets/icons/haze.png
new file mode 100644
index 0000000..e60b30c
Binary files /dev/null and b/weather-app/react-native/assets/icons/haze.png differ
diff --git a/weather-app/react-native/assets/icons/mist.png b/weather-app/react-native/assets/icons/mist.png
new file mode 100644
index 0000000..5f6cdfa
Binary files /dev/null and b/weather-app/react-native/assets/icons/mist.png differ
diff --git a/weather-app/react-native/assets/icons/moon.png b/weather-app/react-native/assets/icons/moon.png
new file mode 100644
index 0000000..aa0f6a9
Binary files /dev/null and b/weather-app/react-native/assets/icons/moon.png differ
diff --git a/weather-app/react-native/assets/icons/rain.png b/weather-app/react-native/assets/icons/rain.png
new file mode 100644
index 0000000..c0b0fae
Binary files /dev/null and b/weather-app/react-native/assets/icons/rain.png differ
diff --git a/weather-app/react-native/assets/icons/sand.png b/weather-app/react-native/assets/icons/sand.png
new file mode 100644
index 0000000..da130dc
Binary files /dev/null and b/weather-app/react-native/assets/icons/sand.png differ
diff --git a/weather-app/react-native/assets/icons/snow.png b/weather-app/react-native/assets/icons/snow.png
new file mode 100644
index 0000000..54fe306
Binary files /dev/null and b/weather-app/react-native/assets/icons/snow.png differ
diff --git a/weather-app/react-native/assets/icons/thunderstrome.png b/weather-app/react-native/assets/icons/thunderstrome.png
new file mode 100644
index 0000000..4fdc08f
Binary files /dev/null and b/weather-app/react-native/assets/icons/thunderstrome.png differ
diff --git a/weather-app/react-native/assets/icons/tornado.png b/weather-app/react-native/assets/icons/tornado.png
new file mode 100644
index 0000000..8d2b8df
Binary files /dev/null and b/weather-app/react-native/assets/icons/tornado.png differ
diff --git a/weather-app/react-native/assets/index.js b/weather-app/react-native/assets/index.js
new file mode 100644
index 0000000..88a64da
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/weather-app/react-native/components/SearchBar.jsx b/weather-app/react-native/components/SearchBar.jsx
new file mode 100644
index 0000000..063f6b1
--- /dev/null
+++ b/weather-app/react-native/components/SearchBar.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+
+const SearchBar = () => {
+ return (
+
+ Search bar
+
+ )
+}
+
+export default SearchBar
diff --git a/weather-app/react-native/components/WeatherUi.jsx b/weather-app/react-native/components/WeatherUi.jsx
new file mode 100644
index 0000000..aa1558d
--- /dev/null
+++ b/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 (
+
+ {/* search-bar */}
+ {/* cityname */}
+
+ {name}
+ {getCurrentDate()}
+
+ {/* today's date */}
+ {/* weather-icon main descp temp ->column*/}
+
+
+ {main}
+ {description}
+ {temp}°C
+
+ {/* min-temp max-temp wind humidity ->row*/}
+
+
+ Pressure
+
+ {pressure}
+ hPa
+
+
+
+ Wind Speed
+
+ {speed}
+ m/s
+
+
+
+ Humidity
+
+ {humidity}
+ %
+
+
+
+
+ )
+}
+
+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