Add new wallpaper info modal with go back and download icons

README.md

@@ -93,6 +93,7 @@ Sweather architecture is composed by the following folders:
     Each folder represents the components used in each screen. The screens are:
     - `LocationRequest`: Shows an input where the user can enter its location. 
     - `LocationDetails`: Shows the weather of the selected location. 
+    - `WallpaperInfo`: Contains information about the wallpaper shown at one location. 
     - `NotFound`: Route not found sample screen. Not used in the app. 
 
 -   Services:

src/components/icons/ArrowLeft.tsx

@@ -0,0 +1,39 @@
+import { Icon } from "@/interfaces";
+import React from "react";
+import { Path, Svg } from "react-native-svg";
+import { useThemeColor } from "../Themed";
+
+export const ArrowLeft = ({
+  width,
+  height,
+  darkColor,
+  lightColor,
+  lightStroke,
+  darkStroke,
+  ...props
+}: Icon) => {
+  const colorName = useThemeColor(
+    { light: lightColor, dark: darkColor },
+    "text"
+  );
+  const strokeName = useThemeColor(
+    { light: lightStroke, dark: darkStroke },
+    "text"
+  );
+
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 21"
+      fill="none"
+      stroke={strokeName}
+      {...props}
+    >
+      <Path
+        d="M20 9.0268H4.7875L11.775 2.0393L10 0.276802L0 10.2768L10 20.2768L11.7625 18.5143L4.7875 11.5268H20V9.0268Z"
+        fill={colorName === "#fff" ? "#fffffe" : colorName}
+      />
+    </Svg>
+  );
+};

src/components/icons/DownloadArrow.tsx

@@ -25,13 +25,13 @@ export const DownloadArrow = ({
     <Svg
       width={width}
       height={height}
-      viewBox="0 0 20 29"
+      viewBox="0 0 18 20"
       fill="none"
       stroke={strokeName}
       {...props}
     >
       <Path
-        d="M9.20428 0H12.3293C12.8488 0 13.2668 0.417969 13.2668 0.9375V7.5H16.6926C17.3879 7.5 17.7355 8.33984 17.2433 8.83203L11.3019 14.7773C11.009 15.0703 10.5285 15.0703 10.2355 14.7773L4.28632 8.83203C3.79413 8.33984 4.14178 7.5 4.8371 7.5H8.26678V0.9375C8.26678 0.417969 8.68475 0 9.20428 0ZM20.7668 14.6875V19.0625C20.7668 19.582 20.3488 20 19.8293 20H1.70428C1.18475 20 0.766785 19.582 0.766785 19.0625V14.6875C0.766785 14.168 1.18475 13.75 1.70428 13.75H7.43475L9.34882 15.6641C10.134 16.4492 11.3996 16.4492 12.1848 15.6641L14.0988 13.75H19.8293C20.3488 13.75 20.7668 14.168 20.7668 14.6875ZM15.923 18.125C15.923 17.6953 15.5715 17.3438 15.1418 17.3438C14.7121 17.3438 14.3605 17.6953 14.3605 18.125C14.3605 18.5547 14.7121 18.9062 15.1418 18.9062C15.5715 18.9062 15.923 18.5547 15.923 18.125ZM18.423 18.125C18.423 17.6953 18.0715 17.3438 17.6418 17.3438C17.2121 17.3438 16.8605 17.6953 16.8605 18.125C16.8605 18.5547 17.2121 18.9062 17.6418 18.9062C18.0715 18.9062 18.423 18.5547 18.423 18.125Z"
+        d="M14.4021 7.05882H12.5315V1.17647C12.5315 0.529412 12.0021 0 11.355 0H6.64914C6.00208 0 5.47267 0.529412 5.47267 1.17647V7.05882H3.60208C2.55502 7.05882 2.02561 8.32941 2.76678 9.07059L8.16678 14.4706C8.62561 14.9294 9.36678 14.9294 9.82561 14.4706L15.2256 9.07059C15.9668 8.32941 15.4491 7.05882 14.4021 7.05882ZM0.766785 18.8235C0.766785 19.4706 1.2962 20 1.94326 20H16.0609C16.708 20 17.2374 19.4706 17.2374 18.8235C17.2374 18.1765 16.708 17.6471 16.0609 17.6471H1.94326C1.2962 17.6471 0.766785 18.1765 0.766785 18.8235Z"
         fill={colorName === "#fff" ? "#fffffe" : colorName}
       />
     </Svg>

src/navigation/LinkingConfiguration.ts

@@ -4,17 +4,18 @@
  * https://reactnavigation.org/docs/configuring-links
  */
 
-import { LinkingOptions } from '@react-navigation/native';
-import * as Linking from 'expo-linking';
-import { RootStackParamList } from './types.d';
+import { LinkingOptions } from "@react-navigation/native";
+import * as Linking from "expo-linking";
+import { RootStackParamList } from "./types.d";
 
 const linking: LinkingOptions<RootStackParamList> = {
-  prefixes: [Linking.createURL('')],
+  prefixes: [Linking.createURL("")],
   config: {
     screens: {
-      LocationRequest: 'request',
-      LocationDetails: 'details',
-      NotFound: '*',
+      LocationRequest: "request",
+      LocationDetails: "details",
+      WallpaperInfo: "wallpaper-info",
+      NotFound: "*",
     },
   },
 };

src/navigation/index.tsx

@@ -7,8 +7,11 @@ import { hasEnvironmentVariables } from "@/config/dotenv";
 import LocationDetailsScreen from "@/screens/LocationDetails";
 import LocationRequestScreen from "@/screens/LocationRequest";
 import NotFoundScreen from "@/screens/NotFoundScreen";
+import WallpaperInfo from "@/screens/WallpaperInfo";
 import {
-  DarkTheme, DefaultTheme, NavigationContainer
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import * as React from "react";
@@ -23,7 +26,7 @@ LogBox.ignoreLogs([
 
 // Parse environment variables
 if (!hasEnvironmentVariables(process.env)) {
-  throw new Error('Please provide all the required environment variables')
+  throw new Error("Please provide all the required environment variables");
 }
 
 export default function Navigation({
@@ -60,6 +63,11 @@ function RootNavigator() {
         component={LocationDetailsScreen}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="WallpaperInfo"
+        component={WallpaperInfo}
+        options={{ headerShown: false, presentation: "modal" }}
+      />
       <Stack.Screen
         name="NotFound"
         component={NotFoundScreen}

src/navigation/types.d.tsx

@@ -18,7 +18,10 @@ export type RootStackParamList = {
   LocationDetails: {
     weather: Weather;
     forecast: Forecast;
-    wallpaper?: Uri;
+    wallpaper: Uri;
+  };
+  WallpaperInfo: {
+    wallpaper: Uri;
   };
   NotFound: undefined;
 };

src/screens/LocationDetails/InformationButton.tsx

@@ -2,7 +2,7 @@ import { Info } from "@/components/icons/Info";
 import Colors from "@/constants/Colors";
 import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
 
-const DONWLOAD_BUTTON_SIZE = 40;
+const INFO_BUTTON_SIZE = 40;
 
 interface InformationButtonProps {
   onClick: () => void;
@@ -19,8 +19,8 @@ export const InformationButton = ({
       lightStroke={Colors.palette.black}
       darkColor={Colors.palette.black}
       darkStroke={Colors.palette.black}
-      width={DONWLOAD_BUTTON_SIZE}
-      height={DONWLOAD_BUTTON_SIZE}
+      width={INFO_BUTTON_SIZE}
+      height={INFO_BUTTON_SIZE}
     />
   </TouchableOpacity>
 );

src/screens/LocationDetails/index.tsx

@@ -1,20 +1,29 @@
 import { RootStackScreenProps } from "@/navigation/types.d";
+import { useNavigation } from "@react-navigation/native";
 import { ImageBackground, StatusBar, StyleSheet } from "react-native";
 import { InformationButton } from "./InformationButton";
 import WeatherSection from "./WeatherSection";
 
+const statusBarHeight = StatusBar.currentHeight ?? 0;
+
 export default function LocationDetailsScreen({
   route: { params },
 }: RootStackScreenProps<"LocationDetails">) {
   const { weather, forecast, wallpaper } = params;
+  const navigation = useNavigation();
 
-  const handleClick = () => {
-    console.log("Download clicked");
+  const goToWallpaperInfo = () => {
+    navigation.navigate("WallpaperInfo", {
+      wallpaper,
+    });
   };
 
   return (
     <ImageBackground source={wallpaper} style={styles.backgroundImage}>
-      <InformationButton style={styles.downloadIcon} onClick={handleClick} />
+      <InformationButton
+        style={styles.informationIcon}
+        onClick={goToWallpaperInfo}
+      />
       <WeatherSection weather={weather} forecast={forecast} />
     </ImageBackground>
   );
@@ -28,9 +37,9 @@ const styles = StyleSheet.create({
     fontSize: 18,
     padding: 10,
   },
-  downloadIcon: {
+  informationIcon: {
     position: "absolute",
-    top: StatusBar.currentHeight,
+    top: statusBarHeight + 10,
     right: 24,
   },
 });

src/screens/WallpaperInfo/BackButton.tsx

@@ -0,0 +1,23 @@
+import { ArrowLeft } from "@/components/icons/ArrowLeft";
+import Colors from "@/constants/Colors";
+import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
+
+const BACK_BUTTON_SIZE = 30;
+
+interface BackButtonProps {
+  onClick: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const BackButton = ({ onClick, style }: BackButtonProps) => (
+  <TouchableOpacity onPress={onClick} style={style}>
+    <ArrowLeft
+      lightColor={Colors.palette.black}
+      lightStroke={Colors.palette.black}
+      darkColor={Colors.palette.black}
+      darkStroke={Colors.palette.black}
+      width={BACK_BUTTON_SIZE}
+      height={BACK_BUTTON_SIZE}
+    />
+  </TouchableOpacity>
+);

src/screens/WallpaperInfo/DownloadButton.tsx

@@ -0,0 +1,23 @@
+import { DownloadArrow } from "@/components/icons/DownloadArrow";
+import Colors from "@/constants/Colors";
+import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
+
+const DONWLOAD_BUTTON_SIZE = 30;
+
+interface DownloadButtonProps {
+  onClick: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const DownloadButton = ({ onClick, style }: DownloadButtonProps) => (
+  <TouchableOpacity onPress={onClick} style={style}>
+    <DownloadArrow
+      lightColor={Colors.palette.black}
+      lightStroke={Colors.palette.black}
+      darkColor={Colors.palette.black}
+      darkStroke={Colors.palette.black}
+      width={DONWLOAD_BUTTON_SIZE}
+      height={DONWLOAD_BUTTON_SIZE}
+    />
+  </TouchableOpacity>
+);

src/screens/WallpaperInfo/index.tsx

@@ -0,0 +1,45 @@
+import { RootStackScreenProps } from "@/navigation/types.d";
+import { useNavigation } from "@react-navigation/native";
+import { ImageBackground, StatusBar, StyleSheet } from "react-native";
+import { BackButton } from "./BackButton";
+import { DownloadButton } from "./DownloadButton";
+
+const statusBarHeight = StatusBar.currentHeight ?? 0;
+
+export default function WallpaperInfoScreen({
+  route: { params },
+}: RootStackScreenProps<"WallpaperInfo">) {
+  const { wallpaper } = params;
+  const navigator = useNavigation();
+
+  const goBack = () => {
+    navigator.goBack();
+  };
+
+  const downloadWallpaper = () => {
+    console.log("Downloading wallpaper...");
+  };
+
+  return (
+    <ImageBackground source={wallpaper} style={styles.backgroundImage}>
+      <BackButton style={styles.goBackIcon} onClick={goBack} />
+      <DownloadButton style={styles.downloadIcon} onClick={downloadWallpaper} />
+    </ImageBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    height: "100%",
+  },
+  downloadIcon: {
+    position: "absolute",
+    top: statusBarHeight + 10,
+    right: 24,
+  },
+  goBackIcon: {
+    position: "absolute",
+    top: statusBarHeight + 10,
+    left: 24,
+  },
+});