Merge pull request #45 from abhishek622/main

#1 final stage update

weather-app/react-native/App.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View, SafeAreaView,StatusBar } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, View, SafeAreaView,StatusBar,Alert } from 'react-native';
 import SearchBar from './components/SearchBar';
 import WeatherUi from './components/WeatherUi';
+import * as Location from 'expo-location';
 
 const API_KEY = 'c5212ff223c381bf600ca14a06be152c'
 
@@ -10,6 +11,9 @@ export default function App() {
 
   const [weatherData, setWeatherData] = useState(null)
   const [loaded, setLoaded] = useState(true)
+  const [errorMsg, setErrorMsg] = useState('');
+  // const [location, setLocation ] = useState(null);
+  const [city, setCity ] = useState();
 
   async function fetchWeather(cityName){
     setLoaded(false)
@@ -28,10 +32,32 @@ export default function App() {
     }
   }
 
-  useEffect(() =>{
-    fetchWeather('Delhi');
-    // console.log(weatherData)
-  },[])
+  useEffect(() => {
+    runFunction();
+    fetchWeather(city);
+  } , []);
+
+  const runFunction = async () => {
+    let {status} = await Location.requestForegroundPermissionsAsync();
+    if (status !== 'granted') {
+        setErrorMsg('Access to Location denied');
+    }
+
+    const location = await Location.getCurrentPositionAsync({});
+    // setLocation(location)
+
+    const place = await Location.reverseGeocodeAsync({
+        latitude : location.coords.latitude,
+        longitude : location.coords.longitude
+    });
+
+    let city;
+    place.find( p => {
+      city = p.city
+      setCity(p.city)
+    });
+}
+
 
   if(!loaded){
     return(
@@ -43,7 +69,7 @@ export default function App() {
     return(
       <View style={styles.activityContainer}>
         <SearchBar fetchWeather={fetchWeather}/>
-        <Text style={styles.errMsg}>City Not Found!!! Try different city</Text>
+        <Text style={styles.errMsg}>Something is not right! search city here</Text>
       </View>
     )
   }
@@ -66,13 +92,13 @@ const styles = StyleSheet.create({
     flex: 1,
     marginTop: StatusBar.currentHeight || 0,
     alignItems:'center',
-    backgroundColor:'#979797',
+    backgroundColor:'#f34053',
     justifyContent:'center',
   },
   errMsg:{
     fontSize:26,
     fontWeight:'bold',
-    color:'#c21b0c',
+    color:'#fff',
     marginTop:10,
     textAlign:'center',
   }

weather-app/react-native/README.md

@@ -0,0 +1,15 @@
+<img src="https://github.com/abhishek622/projects/blob/main/weather-app/react-native/assets/poster.png"/>
+
+This weather app shows the current temperature in Celcius, wind speed, humidity, pressure (above sea level), and weather description. It also has a search feature from which users can see the weather data of another city. It is an open-source project.
+
+## Project setup
+
+`npm install`
+
+## Start app with
+
+`expo start`
+
+## Screenshot
+
+<img src="https://github.com/abhishek622/projects/blob/main/weather-app/react-native/assets/home_screen.png" height="500"/> <img src="https://github.com/abhishek622/projects/blob/main/weather-app/react-native/assets/search_screen.png" height="500"/>

weather-app/react-native/app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "react-native",
-    "slug": "react-native",
+    "name": "weather-app",
+    "slug": "weather-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

weather-app/react-native/package.json

@@ -13,7 +13,8 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-    "react-native-web": "~0.13.12"
+    "react-native-web": "~0.13.12",
+    "expo-location": "~12.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0"