Please dont judge me for the negative margin

Im happy with the way this looks, not quite happy with the negative margin. I might give it another smash if I have the time tomorrow morning between the interviews. Also, I did try to install Moti && React-reanimated to give it a quick go on the animations but unfortunately my simulators crash expo/expo#20661 Might be related to this: I had changed the babel, and ive done this many times before but this seems to not like me today
JFurgalski · Dec 11, 2023 · 0558c89 · 0558c89
1 parent a729c25
commit 0558c89
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/technical-exercise-rn-main/App.tsx b/technical-exercise-rn-main/App.tsx
@@ -5,12 +5,12 @@ import StreakComponent from "./src/components/StreakComponent/StreakComponent";
 
 export default function App() {
   const streakData: string[] = [
-    "2023-12-05T00:00:00+00:00",
-    "2023-12-06T00:00:00+00:00",
-    "2023-12-07T00:00:00+00:00",
-    "2023-12-08T00:00:00+00:00",
-    "2023-12-09T00:00:00+00:00",
-    "2023-12-10T00:00:00+00:00",
+    // "2023-12-05T00:00:00+00:00",
+    // "2023-12-06T00:00:00+00:00",
+    // "2023-12-07T00:00:00+00:00",
+    // "2023-12-08T00:00:00+00:00",
+    // "2023-12-09T00:00:00+00:00",
+    // "2023-12-10T00:00:00+00:00",
     "2023-12-11T00:00:00+00:00",
   ];
 

diff --git a/technical-exercise-rn-main/src/components/SingleStreak/SingleStreak.tsx b/technical-exercise-rn-main/src/components/SingleStreak/SingleStreak.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { Icon } from "../Icon/Icon";
 import { styles } from "./SingleStreak.styles";

diff --git a/technical-exercise-rn-main/src/components/StreakComponent/StreakComponent.styles.ts b/technical-exercise-rn-main/src/components/StreakComponent/StreakComponent.styles.ts
@@ -1,4 +1,5 @@
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
+const { width } = Dimensions.get("window");
 
 const styles = StyleSheet.create({
   container: {
@@ -10,7 +11,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    width: "90%",
+    width: width * 0.9,
+    marginHorizontal: -8,
   },
 
   dayContainer: {
@@ -21,7 +23,7 @@ const styles = StyleSheet.create({
   daysOfWeekWrapper: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
+    paddingHorizontal: 18,
     alignItems: "center",
   },