day details and hourly chart

App.js

@@ -19,9 +19,9 @@ const App: () => React$Node = () => {
   return (
     <Provider store={store}>
       <Theme>
-        {/* <SafeAreaProvider> */}
-        <StackNavigation />
-        {/* </SafeAreaProvider> */}
+        <SafeAreaProvider>
+          <StackNavigation />
+        </SafeAreaProvider>
       </Theme>
     </Provider>
   );

package.json

@@ -20,6 +20,7 @@
     "moment": "^2.29.1",
     "react": "16.13.1",
     "react-native": "0.63.3",
+    "react-native-chart-kit": "^6.9.0",
     "react-native-dotenv": "^2.4.2",
     "react-native-dropdown-picker": "^3.7.5",
     "react-native-geolocation-service": "^5.0.0",
@@ -31,6 +32,7 @@
     "react-native-screens": "^2.16.1",
     "react-native-simple-toast": "^1.1.3",
     "react-native-splash-screen": "^3.2.0",
+    "react-native-svg": "^12.1.0",
     "react-native-touchable-scale": "^2.1.2",
     "react-native-vector-icons": "^7.1.0",
     "react-redux": "^7.2.2",

src/components/Day.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import styled, { css } from 'styled-components/native';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -20,12 +19,12 @@ export default ({ day, forecast }) => {
         />
         <DayText>{day}</DayText>
       </DayIcon>
-      <View>
+      <WeatherTemp>
         <WeatherText>{forecast.weather[0].main}</WeatherText>
         <TempText>
           {round(forecast.temp.max)}&deg; / {round(forecast.temp.min)}&deg;
         </TempText>
-      </View>
+      </WeatherTemp>
     </Container>
   );
 };
@@ -37,8 +36,8 @@ const Container = styled.View`
   align-items: center;
   border-radius: ${RFValue(10)}px;
   border: 1px ${({ theme }) => theme.colors.border};
-  margin-bottom: ${RFValue(7)}px;
-  padding-horizontal: ${RFValue(10)}px;
+  margin-top: ${RFValue(7)}px;
+  padding-horizontal: ${RFValue(15)}px;
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
 `;
 
@@ -63,6 +62,11 @@ const DayText = styled.Text`
   font-size: ${RFValue(25)}px;
 `;
 
+const WeatherTemp = styled.View`
+  height: 100%;
+  justify-content: center;
+`;
+
 const WeatherText = styled.Text`
   color: ${({ theme }) => theme.colors.textAlt};
   font-size: ${RFValue(12)}px;

src/components/DayDetailsBox.jsx

@@ -0,0 +1,136 @@
+import React, { useContext } from 'react';
+
+import styled from 'styled-components/native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Fontisto from 'react-native-vector-icons/Fontisto';
+import { ThemeContext } from 'styled-components';
+import { useSelector } from 'react-redux';
+
+const Card = ({ heading, sunHeading, icon }) => {
+  return (
+    <StyledCard>
+      <CardContent>
+        <CardHeading>{heading}</CardHeading>
+        <CardSubHeading>{sunHeading}</CardSubHeading>
+      </CardContent>
+      {icon}
+    </StyledCard>
+  );
+};
+
+export default ({ forecast }) => {
+  const units = useSelector((state) => state.units);
+  const themeContext = useContext(ThemeContext);
+  const iconSize = RFValue(30);
+  return (
+    <>
+      <BoxRow>
+        <Card
+          heading="UVI"
+          sunHeading={forecast.uvi}
+          icon={
+            <Fontisto
+              name="day-sunny"
+              size={iconSize}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+        <Card
+          heading="Wind speed"
+          sunHeading={`${forecast.wind_speed} ${
+            units === 'metric' ? 'm/s' : 'mi/h'
+          }`}
+          icon={
+            <MaterialCommunityIcons
+              name="weather-windy"
+              size={iconSize}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+      </BoxRow>
+      <BoxRow>
+        <Card
+          heading="Humidity"
+          sunHeading={`${forecast.humidity}%`}
+          icon={
+            <MaterialCommunityIcons
+              name="water-percent"
+              size={RFValue(30)}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+        <Card
+          heading="Pressure"
+          sunHeading={`${forecast.pressure} hPa`}
+          icon={
+            <Ionicons
+              name="speedometer-outline"
+              size={RFValue(30)}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+      </BoxRow>
+      <BoxRow>
+        <Card
+          heading="Cloud cover"
+          sunHeading={`${forecast.clouds}%`}
+          icon={
+            <Ionicons
+              name="cloud-outline"
+              size={RFValue(30)}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+        <Card
+          heading="Dew point"
+          sunHeading={`${forecast.dew_point} ${
+            units === 'metric' ? '⁰C' : '⁰F'
+          }`}
+          icon={
+            <Ionicons
+              name="water-outline"
+              size={RFValue(30)}
+              color={themeContext.colors.icon}
+            />
+          }
+        />
+      </BoxRow>
+    </>
+  );
+};
+
+const BoxRow = styled.View`
+  flex-direction: row;
+  height: ${RFValue(60)}px;
+`;
+
+const StyledCard = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: ${RFValue(2)}px;
+  border-radius: ${RFValue(10)}px;
+  border: 1px ${({ theme }) => theme.colors.border};
+  padding-horizontal: ${RFValue(15)}px;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+const CardContent = styled.View``;
+
+const CardHeading = styled.Text`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: ${RFValue(16)}px;
+`;
+
+const CardSubHeading = styled.Text`
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: ${RFValue(12)}px;
+`;

src/components/DropDownSettings.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
 
 import styled from 'styled-components/native';
 import DropDownPicker from 'react-native-dropdown-picker';

src/components/HourlyTimeline.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Dimensions } from 'react-native';
+
+import styled from 'styled-components/native';
+import { LineChart } from 'react-native-chart-kit';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useSelector } from 'react-redux';
+import moment from 'moment';
+import { Svg, Text as TextSVG } from 'react-native-svg';
+
+import { round, weatherIcons, rootNavigation } from '../utils';
+
+export default () => {
+  const timeFormat = useSelector((state) => state.timeFormat);
+  const hourly = useSelector((state) => state.forecast.hourly);
+
+  const timeString = (sec) => {
+    if (timeFormat === '24') return moment(sec * 1000).format('HH:mm');
+    return moment(sec * 1000).format('hh:mm a');
+  };
+  const chartData = {
+    labels: hourly.map((item) => timeString(item.dt)),
+    datasets: [
+      {
+        data: hourly.map((item) => round(item.temp)),
+        color: (opacity = 0.5) => `rgba(255, 255, 255, ${opacity})`,
+      },
+    ],
+    legend: [],
+  };
+  const chartConfig = {
+    backgroundColor: '#005aae',
+    backgroundGradientFrom: '#006ace',
+    backgroundGradientTo: '#40a1fc',
+    decimalPlaces: 2,
+    color: (opacity = 0) => `rgba(255, 255, 255, ${opacity})`,
+    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+    style: {},
+    propsForDots: {
+      r: '4',
+      strokeWidth: '2',
+      stroke: '#40a1fc',
+    },
+    propsForLabels: { fontSize: RFValue(9) },
+    propsForVerticalLabels: { fontWeight: 'bold', fontSize: RFValue(8) },
+  };
+  return (
+    <Container>
+      {/* <HeadingText>Hourly forecast</HeadingText> */}
+      <ScrollView horizontal={true}>
+        <LineChart
+          data={chartData}
+          width={4000}
+          height={RFValue(150)}
+          yAxisSuffix="&deg;"
+          yAxisInterval={6}
+          yLabelsOffset={20}
+          chartConfig={chartConfig}
+          //   bezier
+          withHorizontalLines={false}
+          withInnerLines={false}
+          withOuterLines={false}
+          withHorizontalLabels={false}
+          fromZero
+          renderDotContent={({ x, y, index, indexData }) => {
+            return (
+              <TextSVG
+                key={index}
+                x={x}
+                y={y - 10}
+                fill="white"
+                fontSize={RFValue(9)}
+                fontWeight="bold"
+                textAnchor="middle"
+              >
+                {indexData}&deg;
+              </TextSVG>
+            );
+          }}
+          formatYLabel={(label) => round(label)}
+          style={{}}
+        />
+      </ScrollView>
+    </Container>
+  );
+};
+
+const Container = styled.View`
+  margin: ${RFValue(10)}px;
+  margin-top: 0px;
+  border-radius: ${RFValue(10)}px;
+  overflow: hidden;
+`;
+
+const ScrollView = styled.ScrollView.attrs(() => ({
+  contentContainerStyle: {
+    justifyContent: 'space-between',
+  },
+}))``;
+
+const HeadingText = styled.Text`
+  z-index: 1000;
+  position: absolute;
+  color: white;
+  font-size: ${RFValue(15)}px;
+  padding: ${RFValue(10)}px;
+  padding-top: ${RFValue(5)}px;
+  font-weight: bold;
+`;

src/components/Today.jsx

@@ -109,7 +109,7 @@ const WeatherText = styled(BaseText)`
 const SettingsContainer = styled.Pressable`
   position: absolute;
   right: ${RFValue(20)}px;
-  bottom: ${RFValue(15)}px;
+  bottom: ${RFValue(0)}px;
   border-radius: 50px;
   padding: ${RFValue(7)}px;
 `;

src/components/WeekDays.jsx

@@ -58,5 +58,6 @@ export default () => {
 const Container = styled.View`
   flex: 1;
   justify-content: space-around;
-  padding-horizontal: ${RFValue(10)}px;
+  margin: ${RFValue(10)}px;
+  margin-top: 0px;
 `;