break animation and set runOnlyForDeploymentPostprocessing = 1

apps/expo/app/break/[appShortcutName].tsx

@@ -1,62 +1,138 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Easing } from "react-native";
 import { router, useLocalSearchParams } from "expo-router";
 import type { AnimationObject } from "lottie-react-native";
 import LottieView from "lottie-react-native";
 import { observer } from "mobx-react-lite";
-import { Button, View, YStack } from "tamagui";
+import { Button, H3, Paragraph, View, YStack } from "tamagui";
 
 import { Container } from "../../components/container";
 import { BreakStore } from "../../data/break.store";
+import { OverviewStore } from "../../data/overview.store";
+
+const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
 
 const Break = observer(() => {
   const [loaded, setLoaded] = useState(false);
+  const [breakStatus, setBreakStatus] = useState<"running" | "finished">("finished");
   const searchParams = useLocalSearchParams<{ appShortcutName: string }>();
   useEffect(() => {
     if (loaded) return;
     void BreakStore.init({ appShortcutName: searchParams.appShortcutName }).then(() => {
       setLoaded(true);
     });
+    void OverviewStore.init();
   }, [loaded, searchParams.appShortcutName]);
+
+  const animationProgress = useRef(new Animated.Value(0));
+  const selectedApp = BreakStore.app;
+
+  useEffect(() => {
+    if (selectedApp) {
+      Animated.timing(animationProgress.current, {
+        toValue: 1,
+        duration: selectedApp?.settings.breakDurationSeconds * 1000,
+        easing: Easing.inOut(Easing.linear),
+        useNativeDriver: false,
+      }).start();
+      setBreakStatus("running");
+
+      animationProgress.current.addListener(({ value }) => {
+        if (value === 1) {
+          setBreakStatus("finished");
+        }
+      });
+    }
+  }, [selectedApp]);
+
+  if (!selectedApp) {
+    return null;
+  }
   return (
     <Container scroll={false} flex={1} paddingBottom={0}>
-      <View flex={1}>
-        <LottieView
-          autoPlay
-          loop
+      <View flex={1} marginBottom={"$12"} justifyContent="center" alignItems="center">
+        <AnimatedLottieView
+          progress={animationProgress.current}
           // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment
           source={require("../../assets/water-drop-animation.json") as AnimationObject}
+          style={{
+            height: 300,
+            marginBottom: -50,
+          }}
         />
-      </View>
-      <YStack space="$2">
-        {process.env.NODE_ENV === "development" && (
-          <>
-            <Button onPress={() => router.replace("/overview/")}>Reset</Button>
-            <Button
-              onPress={() => {
-                router.replace("/overview/");
-                router.replace(`/break/${BreakStore.app?.name}`);
-              }}
-            >
-              Restart
-            </Button>
-          </>
-        )}
-        <Button
-          onPress={() => {
-            void BreakStore.exitApp();
+        <H3
+          animation={"fadeIn"}
+          enterStyle={{
+            opacity: 0,
           }}
+          marginTop="$5"
+          opacity={1}
         >
-          I don&apos;t want to open this app
-        </Button>
-        <Button
-          onPress={() => {
-            void BreakStore.openApp();
+          {breakStatus === "running" ? (
+            BreakStore.getRandomBreakMessage()
+          ) : (
+            <YStack space="$1">
+              <H3 textAlign="center">{selectedApp.name}</H3>
+              <Paragraph
+                size="$5"
+                textAlign="center"
+                fontWeight={"bold"}
+                color="#797979"
+              >{`Don't break your streak!`}</Paragraph>
+              {OverviewStore.preventedByApp(selectedApp) > 0 && (
+                <Paragraph
+                  size="$5"
+                  fontWeight={"bold"}
+                  color="#797979"
+                  textAlign="center"
+                >{`You have prevented yourself from opening this app ${OverviewStore.preventedByApp(
+                  selectedApp
+                )}x`}</Paragraph>
+              )}
+            </YStack>
+          )}
+        </H3>
+      </View>
+      {breakStatus === "finished" && (
+        <YStack
+          space="$2"
+          marginTop="$6"
+          animation={"fadeIn"}
+          enterStyle={{
+            opacity: 0,
           }}
-          variant="outlined"
+          opacity={1}
         >
-          {`Open ${BreakStore.app?.name}`}
-        </Button>
-      </YStack>
+          {process.env.NODE_ENV === "development" && (
+            <YStack space="$2">
+              <Button onPress={() => router.replace("/overview/")}>Reset</Button>
+              <Button
+                onPress={() => {
+                  router.replace("/overview/");
+                  router.replace(`/break/${selectedApp.name}`);
+                }}
+              >
+                Restart
+              </Button>
+            </YStack>
+          )}
+          <Button
+            onPress={() => {
+              void BreakStore.exitApp();
+            }}
+          >
+            {`I don't want to open ${selectedApp.name}`}
+          </Button>
+          <Button
+            onPress={() => {
+              void BreakStore.openApp();
+            }}
+            variant="outlined"
+          >
+            {`Open ${selectedApp.name}`}
+          </Button>
+        </YStack>
+      )}
     </Container>
   );
 });

apps/expo/components/line.chart.tsx

@@ -2,6 +2,8 @@ import type { Text as ReactNativeText } from "react-native";
 import { LineChart as LineChartGifted } from "react-native-gifted-charts";
 import { H4, Paragraph, Text, useTheme, View, YStack } from "tamagui";
 
+import { useTheme as useThemeBase } from "./theme-provider";
+
 export const LineChart = ({
   data,
   dummy,
@@ -17,6 +19,7 @@ export const LineChart = ({
   dummy?: boolean;
 }) => {
   const theme = useTheme();
+  const themeBase = useThemeBase();
   const grey3 = theme.grey3?.val as string;
   const grey4 = theme.grey4?.val as string;
   return (
@@ -28,7 +31,7 @@ export const LineChart = ({
           left={0}
           right={0}
           bottom={0}
-          backgroundColor={"rgba(255,255,255,0.7)"}
+          backgroundColor={themeBase.theme === "light" ? "rgba(255,255,255,0.7)" : "rgba(20,20,20,0.7)"}
           zIndex={99}
           flexDirection="row"
           alignItems="center"

apps/expo/data/break.store.ts

@@ -9,6 +9,26 @@ import { AppsStore, deepLinks } from "./apps";
 
 const isRunningInExpoGo = Constants.appOwnership === AppOwnership.Expo;
 
+const funnyBreakMessages = [
+  "Screen break alert: Don't scroll, just stroll!",
+  "Feeling the breathless media chase? Pause, Breathe. Repeat.",
+  "And now, for your regularly scheduled deep breath...",
+  "ScreenDetox Alert: Inhale the good stuff, exhale the bad stuff, and hit play!",
+  "Alert: Your screen says it misses your blinking. Time for a breather!",
+  "Congratulations! You’ve earned a serene moment. Please collect your tranquility now.",
+  "Time for a Scroll-Free Serenity minute! Don't worry, the memes will be there when you get back.",
+  "Your screen says: 'We need a little time apart... to breathe!'",
+  "Reality check: Did you breathe today?",
+  "Time for a commercial break: Brought to you by Your Well-being.",
+  "Did you know humans have to blink AND breathe? Weird, right? Time for both!",
+  "Your reward for winning our 'Scroller of the Year'? A mindful break!",
+  "Surprise! You've unlocked a secret level: 'The Land of Breaths and Blinks'. Enjoy!",
+  "One small pause for a man, one giant relief for mankind's wall-posting addiction.",
+  "Incoming call from: Relaxation. Will you accept the call?",
+  "Time for a sponsored message from Oxygen: 'Breathe in, Breathe out!'",
+  "Alert: You've reached the end of the internet! Just kidding, but let's take a short break.",
+];
+
 export class BreakStoreSingleton {
   private appStatisticsStore = new AppStatisticsStore();
 
@@ -42,6 +62,10 @@ export class BreakStoreSingleton {
     ExpoExitApp.exit();
   }
 
+  public getRandomBreakMessage(): string {
+    return funnyBreakMessages[Math.floor(Math.random() * funnyBreakMessages.length)]!;
+  }
+
   public get app(): App | null {
     return this._app;
   }