first commit

Author: ahmedsamirdev

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,91 @@
+import { StatusBar } from 'expo-status-bar'
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'
+import * as Location from 'expo-location'
+import WeatherInfo from './components/WeatherInfo'
+import UnitsPicker from './components/UnitsPicker'
+import ReloadIcon from './components/ReloadIcon'
+import WeatherDetails from './components/WeatherDetails'
+// import { WEATHER_API_KEY } from 'react-native-dotenv'
+
+const WEATHER_API_KEY = "a68f42df5bf8a407c62860303949d442";
+const BASE_WEATHER_URL = "https://api.openweathermap.org/data/2.5/weather?";
+
+export default function App() {
+    const [errorMessage, setErrorMessage] = useState(null)
+    const [currentWeather, setCurrentWeather] = useState(null)
+    const [unitsSystem, setUnitsSystem] = useState('metric')
+
+    useEffect(() => {
+        load()
+    }, [unitsSystem])
+
+    async function load() {
+        setCurrentWeather(null)
+        setErrorMessage(null)
+        try {
+            let { status } = await Location.requestForegroundPermissionsAsync()
+
+            if (status !== 'granted') {
+                setErrorMessage('Access to location is needed to run the app')
+                return
+            }
+            const location = await Location.getCurrentPositionAsync()
+
+            const { latitude, longitude } = location.coords
+
+            const weatherUrl = `${BASE_WEATHER_URL}lat=${latitude}&lon=${longitude}&units=${unitsSystem}&appid=${WEATHER_API_KEY}`
+
+            const response = await fetch(weatherUrl)
+
+            const result = await response.json()
+
+            if (response.ok) {
+                setCurrentWeather(result)
+            } else {
+                setErrorMessage(result.message)
+            }
+        } catch (error) {
+            setErrorMessage(error.message)
+        }
+    }
+    if (currentWeather) {
+        return (
+            <View style={styles.container}>
+                <StatusBar style="auto" />
+                <View style={styles.main}>
+                    <UnitsPicker unitsSystem={unitsSystem} setUnitsSystem={setUnitsSystem} />
+                    <ReloadIcon load={load} />
+                    <WeatherInfo currentWeather={currentWeather} />
+                </View>
+                <WeatherDetails currentWeather={currentWeather} unitsSystem={unitsSystem} />
+            </View>
+        )
+    } else if (errorMessage) {
+        return (
+            <View style={styles.container}>
+                <ReloadIcon load={load} />
+                <Text style={{ textAlign: 'center' }}>{errorMessage}</Text>
+                <StatusBar style="auto" />
+            </View>
+        )
+    } else {
+        return (
+            <View style={styles.container}>
+                <ActivityIndicator size="large" color="#30acff" />
+                <StatusBar style="auto" />
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    main: {
+        justifyContent: 'center',
+        flex: 1,
+    },
+})

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "weather-rn",
+    "slug": "weather-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "weatherdev.ahmedsamir.weather"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "description": ""
+  }
+}

assets/adaptive-icon.png

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};