1.0 Beta Relase

App.js

@@ -83,27 +83,38 @@ export default function App() {
 
 
 	};
+	const getLocationFromCity = () => {
+		fetch(
+			`http://api.openweathermap.org/geo/1.0/direct?q=${search}&limit=1&appid=${API_KEY}`
+		)
+			.then((response) => response.json())
+			.then((data) => {
+				setLocation({
+					coords: {
+						latitude: data[0].lat,
+						longitude: data[0].lon,
+					},
+				});
+			});
+	}
+	function submintEdit(){
+		const text = search.trim();
+		console.log(text);
+		if(text.length > 0){
+			getLocationFromCity()
+			updateWeather()
+		}
+	}
 	useEffect(() => {
 		console.log(mode);
 		if (mode === "location") {
 			getAndSetLocation();
 
 		} else if (mode === "city") {
 			ToastAndroid.show("Searching city: "+search, ToastAndroid.SHORT);
-			fetch(
-				`http://api.openweathermap.org/geo/1.0/direct?q=${search}&limit=1&appid=${API_KEY}`
-			)
-				.then((response) => response.json())
-				.then((data) => {
-					setLocation({
-						coords: {
-							latitude: data[0].lat,
-							longitude: data[0].lon,
-						},
-					});
-				});
+			getLocationFromCity();
 			Storage.setItem({
-				key: `weather`,
+				key: `location`,
 				time: Date.now(),
 				value: JSON.stringify(location)
 			})
@@ -133,6 +144,9 @@ export default function App() {
 	const theme = {
 		...MD3LightTheme,
 	};
+	{
+		//TODO: FIX PERFORMANCE!!!
+	}
 	return (
 		<Provider theme={theme}>
 			<NavigationContainer theme={theme} >
@@ -153,7 +167,9 @@ export default function App() {
 							onChangeText={(text) => setSearch(text)}
 							value={search}
 							elevation={0}
-							onSubmitEditing={(text) => text.length > 0 && setMode("city")}
+							//onSubmitEditing={submintEdit()}
+							//onEndEditing={submintEdit()}
+
 							style={{ flex: 1, backgroundColor: theme.colors.primaryContainer }}
 						/>
 						<View
@@ -221,8 +237,8 @@ export default function App() {
 						}}
 					/>
 					<Tab.Screen
-						name={i18next.t('pti')}
-						children={() => <DailyScreen weather={weather} theme={theme} />}
+						name={i18next.t('navigation.daily')}
+						children={() => <DailyScreen t={t} weather={weather} theme={theme} />}
 						options={{
 							tabBarLabel: i18next.t('navigation.daily'),
 							tabBarIcon: ({ color, size }) => (

components/DailyScreen.js

@@ -1,9 +1,78 @@
-import React, { useState, useEffect } from 'react';
-import { Text, View, ScrollView } from 'react-native';
-import { createMaterialBottomTabNavigator as createBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-import { NavigationContainer } from '@react-navigation/native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { IconButton, Searchbar } from 'react-native-paper';
-export default function DailyScreen({ weather }) {
-    return null;
+import React, { useState, useEffect } from "react";
+import { View, ScrollView, StyleSheet, FlatList } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import iconMap from "./iconMap";
+import { Text, ActivityIndicator, Divider, MD3LightTheme } from "react-native-paper";
+import { calculatePTI } from "./utils/PTI";
+import TopCurrent from "./components/TopCurrent";
+import { FlexiCard } from "./components/Cards";
+import moment from "moment";
+import "moment/min/locales";
+import DailyElement from "./components/DailyElement";
+import * as Localization from "expo-localization";
+import { RainComponent, UmbrellaIconReactive } from "./components/Bars";
+//TODO: Add weather alerts
+moment.locale(Localization.locale.slice(0, 2));
+
+export default function DailyScreen({ weather, location, t }) {
+	//const theme = useTheme();
+	const theme = {
+		...MD3LightTheme,
+	};
+	const [weatherIcon, setWeatherIcon] = useState("help");
+	const [weatherIconColor, setWeatherIconColor] = useState(
+		theme.dark ? iconMap["01d"].color_dark : iconMap["01d"].color
+	);
+	useEffect(() => {
+		if (weather !== {} && weather.current !== undefined) {
+			setWeatherIcon(
+				iconMap[weather.current.weather[0].icon].icon !== undefined
+					? iconMap[weather.current.weather[0].icon].icon
+					: "help"
+			);
+			setWeatherIconColor(
+				theme.dark
+					? iconMap[weather.current.weather[0].icon].color_dark !== undefined
+						? iconMap[weather.current.weather[0].icon].color_dark
+						: "00FFFF"
+					: iconMap[weather.current.weather[0].icon].color !== undefined
+					? iconMap[weather.current.weather[0].icon].color
+					: "#FF0000"
+			);
+		}
+	});
+
+	return weather.daily !== undefined ? (
+		<FlatList
+			style={{
+				padding: 8,
+				backgroundColor: theme.colors.background,
+				display: "flex",
+				marginBottom: 16,
+			}}
+			data={weather.daily}
+			keyExtractor={(item) => item.dt.toString()}
+			renderItem={({ item }) => {
+				return <DailyElement x={item} theme={theme} t={t} />;
+			}}
+		/>
+	) : (
+		<View
+			style={{
+				display: "flex",
+				flex: 1,
+				alignContent: "center",
+				justifyContent: "center",
+			}}
+		>
+			<ActivityIndicator size="large" color={theme.colors.primary} />
+		</View>
+	);
 }
+const styles = StyleSheet.create({
+	border: {
+		borderWidth: 1,
+		borderColor: "#CAC4D0",
+		borderRadius: 16,
+	},
+});

components/HourlyScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet, FlatList, TouchableWithoutFeedback } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import iconMap from "./iconMap";
 import { Text, ActivityIndicator, Divider, MD3LightTheme } from "react-native-paper";
@@ -12,7 +12,7 @@ import HourlyElement from "./components/HourlyElement";
 import * as Localization from "expo-localization";
 import { RainComponent, UmbrellaIconReactive } from "./components/Bars";
 //TODO: Add weather alerts
-moment.locale(Localization.locale.slice(0,2));
+moment.locale(Localization.locale.slice(0, 2));
 
 export default function HourlyScreen({ weather, location, t }) {
 	//const theme = useTheme();
@@ -25,7 +25,6 @@ export default function HourlyScreen({ weather, location, t }) {
 	);
 	useEffect(() => {
 		if (weather !== {} && weather.current !== undefined) {
-			console.log(weatherIcon);
 			setWeatherIcon(
 				iconMap[weather.current.weather[0].icon].icon !== undefined
 					? iconMap[weather.current.weather[0].icon].icon
@@ -37,28 +36,24 @@ export default function HourlyScreen({ weather, location, t }) {
 						? iconMap[weather.current.weather[0].icon].color_dark
 						: "00FFFF"
 					: iconMap[weather.current.weather[0].icon].color !== undefined
-					? iconMap[weather.current.weather[0].icon].color
-					: "#FF0000"
+						? iconMap[weather.current.weather[0].icon].color
+						: "#FF0000"
 			);
 		}
 	});
 
 	return weather.hourly !== undefined ? (
-		<ScrollView
-			style={{
+		//<TouchableWithoutFeedback>
+			<FlatList style={{
 				padding: 8,
 				backgroundColor: theme.colors.background,
 				display: "flex",
 				marginBottom: 16,
-			}}
-		>
-			{
-                weather.hourly.map((x, index) => {
-
-                    return <HourlyElement x={x} key={index} theme={theme} t={t} />
-                })
-            }
-		</ScrollView>
+			}} data={weather.hourly} keyExtractor={(item) => item.dt.toString()} renderItem={({ item }) => {
+				return <HourlyElement x={item} theme={theme} t={t} />
+			}} />
+		//</TouchableWithoutFeedback>
+
 	) : (
 		<View
 			style={{