refactor, daily timline, splashscreen

android/app/src/main/res/drawable/background_splash.xml

@@ -10,25 +10,16 @@
         />
 
     <item
-        android:width="200dp"
-        android:height="200dp"
+        android:width="100dp"
+        android:height="100dp"
         android:gravity="center|center_horizontal|center_vertical">
         <bitmap
-            android:width="200dp"
-            android:height="200dp"
-            android:gravity="center|center_horizontal|center_vertical"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:gravity="start|end|top|bottom|center|center_horizontal|center_vertical"
             android:src="@drawable/loader" />
         </item>
 
-    <!-- <item
-        android:width="200dp"
-        android:height="200dp"
-        android:gravity="center">
-        <bitmap
-            android:gravity="left|right|top|bottom|center|center_horizontal|center_vertical"
-            android:src="@drawable/loader" />
-        </item> -->
-
 </layer-list>
 
 

android/app/src/main/res/layout/launch_screen.xml

@@ -7,14 +7,14 @@
     android:layout_height="match_parent"
     android:layout_gravity="start|end|top|bottom|center|center_horizontal|center_vertical"
     android:background="@color/dark"
-    android:fitsSystemWindows="true"
+    android:statusBarColor="@color/transparent"
     tools:context=".MainActivity">
 
     <com.airbnb.lottie.LottieAnimationView
         android:id="@+id/lav_main"
-        android:layout_width="230dp"
-        android:layout_height="230dp"
-        android:layout_marginBottom="12pt"
+        android:layout_width="100dp"
+        android:layout_height="100dp"
+        android:layout_marginBottom="14pt"
         android:layout_gravity="start|end|top|bottom|center|center_horizontal|center_vertical"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"

android/app/src/main/res/raw/weather_loader1.json

@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":24,"ip":0,"op":120,"w":400,"h":226,"nm":"Sol","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rayos Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":120,"s":[180]}],"ix":10},"p":{"a":0,"k":[200,114.334,0],"ix":2},"a":{"a":0,"k":[90.235,90.235,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":24,"s":[90,90,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":62,"s":[110,110,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":96,"s":[90,90,100]},{"t":120,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.221,-0.527],[0,0],[-0.461,0],[0,0],[0.179,0.425],[0,0]],"o":[[0,0],[-0.178,0.425],[0,0],[0.46,0],[0,0],[-0.221,-0.527]],"v":[[-0.595,-9.444],[-8.366,9.076],[-7.771,9.971],[7.771,9.971],[8.365,9.076],[0.594,-9.444]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[90.236,10.221],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.221,0.527],[0,0],[0.46,0],[0,0],[-0.179,-0.424],[0,0]],"o":[[0,0],[0.178,-0.424],[0,0],[-0.461,0],[0,0],[0.221,0.527]],"v":[[0.595,9.444],[8.366,-9.077],[7.772,-9.971],[-7.771,-9.971],[-8.365,-9.077],[-0.594,9.444]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[90.235,170.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.526,0.221],[0,0],[0,-0.461],[0,0],[-0.425,0.179],[0,0]],"o":[[0,0],[-0.425,-0.178],[0,0],[0,0.461],[0,0],[0.526,-0.221]],"v":[[9.445,-0.595],[-9.077,-8.366],[-9.97,-7.771],[-9.97,7.771],[-9.077,8.365],[9.445,0.594]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[170.25,90.236],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":4,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.527,-0.221],[0,0],[0,0.461],[0,0],[0.424,-0.178],[0,0]],"o":[[0,0],[0.424,0.179],[0,0],[0,-0.461],[0,0],[-0.527,0.221]],"v":[[-9.444,0.594],[9.077,8.365],[9.971,7.771],[9.971,-7.771],[9.077,-8.366],[-9.444,-0.595]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[10.221,90.236],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":4,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.216,-0.529],[0,0],[-0.326,0.326],[0,0],[0.426,0.175],[0,0]],"o":[[0,0],[0.174,0.427],[0,0],[0.326,-0.326],[0,0],[-0.529,-0.216]],"v":[[-9.877,-9.036],[-2.276,9.555],[-1.223,9.767],[9.767,-1.223],[9.555,-2.276],[-9.036,-9.877]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.435,36.435],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":4,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.217,0.529],[0,0],[0.326,-0.325],[0,0],[-0.426,-0.174],[0,0]],"o":[[0,0],[-0.174,-0.426],[0,0],[-0.325,0.325],[0,0],[0.529,0.217]],"v":[[9.876,9.035],[2.275,-9.556],[1.223,-9.768],[-9.768,1.223],[-9.556,2.275],[9.035,9.876]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[144.036,144.036],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":4,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.529,-0.216],[0,0],[-0.325,-0.326],[0,0],[-0.175,0.426],[0,0]],"o":[[0,0],[-0.427,0.174],[0,0],[0.326,0.326],[0,0],[0.217,-0.529]],"v":[[9.035,-9.877],[-9.556,-2.276],[-9.768,-1.223],[1.223,9.767],[2.275,9.555],[9.876,-9.036]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[144.036,36.435],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":4,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.529,0.216],[0,0],[0.326,0.326],[0,0],[0.175,-0.426],[0,0]],"o":[[0,0],[0.427,-0.174],[0,0],[-0.326,-0.326],[0,0],[-0.216,0.529]],"v":[[-9.036,9.877],[9.555,2.276],[9.767,1.223],[-1.223,-9.767],[-2.276,-9.555],[-9.877,9.036]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.435,144.036],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":4,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"sol Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":120,"s":[360]}],"ix":10},"p":{"a":0,"k":[200,114.334,0],"ix":2},"a":{"a":0,"k":[61.529,61.528,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[95,95,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":24,"s":[90,90,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":62,"s":[110,110,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":96,"s":[90,90,100]},{"t":120,"s":[95,95,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,15.071],[15.071,0]],"o":[[15.071,0],[0,-15.071],[0,0]],"v":[[-13.644,27.288],[13.644,0],[-13.644,-27.288]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[75.173,61.528],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,15.071],[-15.071,0],[0,-15.071],[15.071,0]],"o":[[0,-15.071],[15.071,0],[0,15.071],[-15.071,0]],"v":[[-27.288,0],[0,-27.289],[27.288,0],[0,27.289]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.972999961703,0.670999983245,0.113999998803,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[61.529,61.528],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,-33.843],[-33.843,0]],"o":[[-33.843,0],[0,33.843],[0,0]],"v":[[30.639,-61.279],[-30.639,0],[30.639,61.279]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.702000038297,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30.89,61.528],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":4,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-33.843],[33.842,0],[0,33.843],[-33.844,0]],"o":[[0,33.843],[-33.844,0],[0,-33.843],[33.842,0]],"v":[[61.279,0],[0,61.278],[-61.279,0],[0,-61.278]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.972999961703,0.670999983245,0.113999998803,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[61.529,61.528],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":4,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0}],"markers":[]}

babel.config.js

@@ -2,6 +2,7 @@ module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     'babel-plugin-styled-components',
+    ['transform-remove-console', { exclude: ['error', 'warn'] }],
     [
       'module:react-native-dotenv',
       {

package.json

@@ -48,6 +48,7 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.1.0",
     "babel-plugin-styled-components": "^1.12.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.0",

src/components/DailyTimeline.jsx

@@ -0,0 +1,178 @@
+import React, { memo } from 'react';
+
+import styled from 'styled-components/native';
+import { css } from 'styled-components';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { useSelector } from 'react-redux';
+import Feather from 'react-native-vector-icons/Feather';
+import moment from 'moment';
+import LottieView from 'lottie-react-native';
+
+import { round, weatherIcons } from '../utils';
+import { StyledTouchableScale } from './StyledComponents';
+
+const DayCard = memo(({ index, clicked }) => {
+  const forecast = useSelector((state) => state.daily[index]);
+  console.log('render daily timeline DayCard : ', index);
+  return (
+    <Column clicked={clicked}>
+      <Header>
+        <CardHeading>
+          {index === 0
+            ? 'Today'
+            : index === 1
+            ? 'Tomorrow'
+            : moment(forecast.dt * 1000).format('dddd')}
+        </CardHeading>
+        <CardSubHeading>
+          {moment(forecast.dt * 1000).format('D/M')}
+        </CardSubHeading>
+        <WeatherIcon
+          source={weatherIcons[forecast.weather[0].icon].animation}
+          loop={true}
+          autoPlay={true}
+          progress={0}
+          speed={1}
+        />
+      </Header>
+      <Content>
+        <TimeTempBox>
+          <Temp>{round(forecast.temp.morn)}&deg;</Temp>
+          <Feels>~ {round(forecast.feels_like.morn)}&deg;</Feels>
+        </TimeTempBox>
+        <TimeTempBox>
+          <Temp>{round(forecast.temp.day)}&deg;</Temp>
+          <Feels>~ {round(forecast.feels_like.day)}&deg;</Feels>
+        </TimeTempBox>
+        <TimeTempBox>
+          <Temp>{round(forecast.temp.eve)}&deg;</Temp>
+          <Feels>~ {round(forecast.feels_like.eve)}&deg;</Feels>
+        </TimeTempBox>
+        <TimeTempBox>
+          <Temp>{round(forecast.temp.night)}&deg;</Temp>
+          <Feels>~ {round(forecast.feels_like.night)}&deg;</Feels>
+        </TimeTempBox>
+      </Content>
+    </Column>
+  );
+});
+
+export default ({ dayClicked, onPress }) => {
+  console.log('render daily timeline  : ', dayClicked);
+  return (
+    <Container>
+      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+        <ColumnFirst>
+          <Header />
+          <Content>
+            <FeatherIcon name="sunrise" />
+            <FeatherIcon name="sun" />
+            <FeatherIcon name="sunset" />
+            <FeatherIcon name="moon" />
+          </Content>
+        </ColumnFirst>
+        {[...Array(8)].map((value, index) => (
+          <StyledTouchableScale key={index} onPress={() => onPress(index)}>
+            <DayCard key={index} index={index} clicked={dayClicked === index} />
+          </StyledTouchableScale>
+        ))}
+      </ScrollView>
+    </Container>
+  );
+};
+
+const Container = styled.View`
+  flex-grow: 1;
+  flex-direction: row;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: ${RFValue(10)}px;
+`;
+
+const ScrollView = styled.ScrollView.attrs(() => ({
+  contentContainerStyle: {
+    justifyContent: 'space-between',
+  },
+}))``;
+
+const column = css`
+  margin-vertical: ${RFValue(20)}px;
+  padding-vertical: ${RFValue(20)}px;
+`;
+
+const Column = styled.View`
+  ${column}
+  flex: 1;
+  width: ${RFValue(70)}px;
+  margin-right: ${RFValue(5)}px;
+  border-width: ${({ clicked }) => (clicked ? '2px' : '1px')};
+  border-color: ${({ clicked, theme }) =>
+    clicked ? theme.colors.primary : theme.colors.border};
+  border-radius: ${RFValue(25)}px;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  /* shadow-opacity: 0.75;
+  shadow-radius: 5px;
+  shadow-color: red;
+  shadow-offset: 0px 0px;
+  overflow: hidden; */
+  elevation: ${({ clicked }) => (clicked ? 4 : 0)};
+`;
+
+const ColumnFirst = styled.View`
+  ${column}
+  width: ${RFValue(40)}px;
+`;
+
+const Text = styled.Text`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: ${RFValue(17)}px;
+`;
+
+const Header = styled.View`
+  height: ${RFValue(90)}px;
+  align-items: center;
+`;
+
+const Content = styled.View`
+  flex-grow: 1;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+const FeatherIcon = styled(Feather).attrs(({ color, theme }) => ({
+  size: RFValue(20),
+  color: color || theme.colors.icon,
+}))`
+  text-align: center;
+`;
+
+const CardHeading = styled(Text)`
+  font-size: ${RFValue(14)}px;
+`;
+
+const CardSubHeading = styled(Text)`
+  color: ${({ theme }) => theme.colors.textAlt};
+  font-size: ${RFValue(12)}px;
+`;
+
+const WeatherIcon = styled(LottieView)`
+  width: ${RFValue(40)}px;
+  height: ${RFValue(40)}px;
+  padding-top: ${RFValue(5)}px;
+`;
+
+const TimeTempBox = styled.View`
+  align-items: center;
+  justify-content: center;
+`;
+
+const Temp = styled(Text)`
+  font-size: ${RFValue(15)}px;
+`;
+
+const Feels = styled(Text)`
+  font-size: ${RFValue(11)}px;
+  color: ${({ theme }) => theme.colors.textAlt};
+  padding-right: ${RFValue(9)}px;
+`;