From e611261a072f2363ed082003033eeca9ae89fc82 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Thu, 11 Dec 2025 13:58:41 +0500
Subject: [PATCH] mobile: wrapped 2025

---
 .../components/side-menu/side-menu-home.tsx   |   33 +-
 .../app/navigation/navigation-stack.tsx       |    9 +
 apps/mobile/app/screens/wrapped/index.tsx     | 1191 +++++++++++++++++
 apps/mobile/app/services/navigation.ts        |    3 +-
 .../mobile/app/stores/use-navigation-store.ts |    1 +
 apps/mobile/package-lock.json                 |   64 +
 apps/mobile/package.json                      |    1 +
 7 files changed, 1293 insertions(+), 9 deletions(-)
 create mode 100644 apps/mobile/app/screens/wrapped/index.tsx

diff --git a/apps/mobile/app/components/side-menu/side-menu-home.tsx b/apps/mobile/app/components/side-menu/side-menu-home.tsx
index cde5ac6e9..b8b78efcb 100644
--- a/apps/mobile/app/components/side-menu/side-menu-home.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-home.tsx
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { SubscriptionPlan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import dayjs from "dayjs";
 import React from "react";
 import { FlatList, View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
@@ -140,19 +141,35 @@ export function SideMenuHome() {
           paddingVertical: DefaultAppStyles.GAP_VERTICAL
         }}
       >
-        {(subscriptionType === SubscriptionPlan.FREE ||
-          !subscriptionType ||
-          !user) &&
-        !SettingsService.getProperty("serverUrls") ? (
+        {dayjs().month() !== 11 ? (
+          <>
+            {(subscriptionType === SubscriptionPlan.FREE ||
+              !subscriptionType ||
+              !user) &&
+            !SettingsService.getProperty("serverUrls") ? (
+              <Button
+                title={pro.title}
+                style={{
+                  width: "100%"
+                }}
+                type="accent"
+                onPress={pro.onPress}
+              />
+            ) : null}
+          </>
+        ) : (
           <Button
-            title={pro.title}
+            title={`Wrapped ${dayjs().year()} 🎉`}
             style={{
               width: "100%"
             }}
-            type="accent"
-            onPress={pro.onPress}
+            bold
+            type="secondaryAccented"
+            onPress={() => {
+              Navigation.navigate("Wrapped");
+            }}
           />
-        ) : null}
+        )}
       </View>
     </View>
   );
diff --git a/apps/mobile/app/navigation/navigation-stack.tsx b/apps/mobile/app/navigation/navigation-stack.tsx
index 0f2ea28fd..8b5d12a7c 100644
--- a/apps/mobile/app/navigation/navigation-stack.tsx
+++ b/apps/mobile/app/navigation/navigation-stack.tsx
@@ -273,6 +273,7 @@ let Settings: any = null;
 let ManageTags: any = null;
 let AddReminder: any = null;
 let PayWall: any = null;
+let Wrapped: any = null;
 export const RootNavigation = () => {
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
@@ -384,6 +385,14 @@ export const RootNavigation = () => {
             return PayWall;
           }}
         />
+
+        <RootStack.Screen
+          name="Wrapped"
+          getComponent={() => {
+            Wrapped = Wrapped || require("../screens/wrapped").default;
+            return Wrapped;
+          }}
+        />
       </RootStack.Navigator>
     </NavigationContainer>
   );
diff --git a/apps/mobile/app/screens/wrapped/index.tsx b/apps/mobile/app/screens/wrapped/index.tsx
new file mode 100644
index 000000000..15c545048
--- /dev/null
+++ b/apps/mobile/app/screens/wrapped/index.tsx
@@ -0,0 +1,1191 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { formatBytes } from "@notesnook/common";
+import { WrappedStats } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import dayjs from "dayjs";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Share from "react-native-share";
+import { SwiperFlatList } from "react-native-swiper-flatlist";
+import ViewShot from "react-native-view-shot";
+import { db } from "../../common/database";
+import { Button } from "../../components/ui/button";
+import { IconButton } from "../../components/ui/icon-button";
+import Heading from "../../components/ui/typography/heading";
+import Paragraph from "../../components/ui/typography/paragraph";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
+import Navigation, { NavigationProps } from "../../services/navigation";
+import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+
+function formatNumber(num: number) {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, "") + "K";
+  }
+  return num.toLocaleString();
+}
+const loadingMessages = [
+  "✨ Counting your brilliant thoughts...",
+  "📚 Organizing your literary masterpiece...",
+  "🧠 Analyzing your genius moments...",
+  `⚡ Powering up your ${dayjs().year()} stats...`,
+  "🎯 Calculating your productivity score...",
+  "🚀 Launching your wrapped experience...",
+  "💡 Illuminating your creative output...",
+  "📊 Crunching those impressive numbers...",
+  "🎨 Painting your year in data...",
+  "⭐ Polishing your achievements...",
+  "🔥 Compiling your hottest content...",
+  "🌟 Gathering your stellar moments...",
+  "💫 Materializing your wrapped experience...",
+  "🎭 Orchestrating your year in review...",
+  "🏆 Tallying your victories...",
+  "📈 Graphing your rise to greatness...",
+  "🎪 Setting up the grand finale...",
+  "🌈 Adding the final touches...",
+  "🎬 Rolling the highlight reel...",
+  "🎉 Almost ready to celebrate!"
+];
+
+// Slide Component
+interface SlideProps {
+  children: React.ReactNode;
+  width: number;
+}
+
+function Slide({ children, width }: SlideProps) {
+  const { colors } = useThemeColors();
+
+  return (
+    <View
+      style={{
+        width,
+        justifyContent: "center",
+        alignItems: "center"
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+// Welcome Slide
+function WelcomeSlide({ width }: { width: number }) {
+  const { colors } = useThemeColors();
+
+  return (
+    <Slide width={width}>
+      <View
+        style={{
+          paddingHorizontal: DefaultAppStyles.GAP
+        }}
+      >
+        <Paragraph
+          style={{
+            fontSize: 72,
+            textAlign: "center",
+            marginBottom: 20
+          }}
+        >
+          🎉
+        </Paragraph>
+        <Heading
+          style={{
+            fontSize: AppFontSize.xxxl,
+            fontWeight: "bold",
+            marginBottom: 10,
+            textAlign: "center"
+          }}
+        >
+          Your {dayjs().year()} Wrapped
+        </Heading>
+        <Paragraph
+          style={{
+            fontSize: AppFontSize.lg,
+            textAlign: "center",
+            color: colors.secondary.paragraph
+          }}
+        >
+          Let's look back at your year in Notesnook
+        </Paragraph>
+      </View>
+    </Slide>
+  );
+}
+
+// Total Notes Slide
+function TotalNotesSlide({ count, width }: { count: number; width: number }) {
+  const { colors } = useThemeColors();
+
+  return (
+    <Slide width={width}>
+      <Heading
+        style={{
+          fontSize: AppFontSize.lg,
+          textAlign: "center"
+        }}
+      >
+        You created
+      </Heading>
+      <Heading
+        style={{
+          fontSize: 80,
+          fontWeight: "bold",
+          textAlign: "center",
+          color: colors.primary.accent
+        }}
+      >
+        {formatNumber(count)}
+      </Heading>
+      <Heading
+        style={{
+          fontSize: AppFontSize.lg,
+          textAlign: "center"
+        }}
+      >
+        notes this year
+      </Heading>
+
+      <View
+        style={{
+          width: "80%",
+          height: 2,
+          backgroundColor: colors.primary.border,
+          marginVertical: DefaultAppStyles.GAP_VERTICAL * 2,
+          alignSelf: "center"
+        }}
+      />
+
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.lg,
+          color: colors.primary.paragraph,
+          textAlign: "center",
+          maxWidth: "80%"
+        }}
+      >
+        That's{" "}
+        <Heading
+          style={{
+            fontSize: AppFontSize.lg,
+            color: colors.primary.paragraph
+          }}
+        >
+          {formatNumber(count)}
+        </Heading>{" "}
+        ideas, thoughts, memories. 100% encrypted. 100% yours.
+      </Paragraph>
+    </Slide>
+  );
+}
+
+// Total Words Slide
+function TotalWordsSlide({ count, width }: { count: number; width: number }) {
+  const { colors } = useThemeColors();
+
+  return (
+    <Slide width={width}>
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.lg,
+          color: colors.primary.paragraph,
+          textAlign: "center"
+        }}
+      >
+        You wrote a total of
+      </Paragraph>
+      <Heading
+        style={{
+          fontSize: 80,
+          fontWeight: "bold",
+          marginBottom: 10,
+          textAlign: "center",
+          color: colors.primary.accent
+        }}
+      >
+        {formatNumber(count)}
+      </Heading>
+      <Heading
+        style={{
+          fontSize: AppFontSize.lg,
+          textAlign: "center",
+          color: colors.primary.paragraph
+        }}
+      >
+        words this year
+      </Heading>
+
+      <View
+        style={{
+          width: "80%",
+          height: 2,
+          backgroundColor: colors.primary.border,
+          marginVertical: DefaultAppStyles.GAP_VERTICAL * 2,
+          alignSelf: "center"
+        }}
+      />
+
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.lg,
+          color: colors.primary.paragraph,
+          textAlign: "center",
+          maxWidth: "80%"
+        }}
+      >
+        That's almost the length of a short novel!
+      </Paragraph>
+    </Slide>
+  );
+}
+
+// Activity Stats Slide
+interface ActivityStatsSlideProps {
+  mostNotesCreatedInMonth?: WrappedStats["mostNotesCreatedInMonth"];
+  mostNotesCreatedInDay?: WrappedStats["mostNotesCreatedInDay"];
+  width: number;
+}
+
+function ActivityStatsSlide({
+  mostNotesCreatedInMonth,
+  mostNotesCreatedInDay,
+  width
+}: ActivityStatsSlideProps) {
+  const { colors } = useThemeColors();
+
+  if (!mostNotesCreatedInMonth && !mostNotesCreatedInDay) return null;
+
+  return (
+    <Slide width={width}>
+      <View
+        style={{
+          gap: DefaultAppStyles.GAP_VERTICAL * 2
+        }}
+      >
+        {mostNotesCreatedInMonth && (
+          <View style={{}}>
+            <Paragraph
+              style={{
+                fontSize: AppFontSize.lg,
+                color: colors.primary.paragraph
+              }}
+            >
+              Your most productive month was
+            </Paragraph>
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center"
+              }}
+            >
+              <Heading
+                style={{
+                  fontSize: AppFontSize.xxxl,
+                  fontWeight: "bold",
+                  textAlign: "center",
+                  marginBottom: 5
+                }}
+              >
+                {mostNotesCreatedInMonth.month}
+              </Heading>
+              <Paragraph
+                style={{
+                  fontSize: AppFontSize.md,
+                  textAlign: "center"
+                }}
+              >
+                {formatNumber(mostNotesCreatedInMonth.count)} notes
+              </Paragraph>
+            </View>
+          </View>
+        )}
+        {mostNotesCreatedInDay && (
+          <View>
+            <Paragraph
+              style={{
+                fontSize: AppFontSize.lg,
+                color: colors.primary.paragraph
+              }}
+            >
+              Your favorite day to write was
+            </Paragraph>
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between"
+              }}
+            >
+              <Heading
+                style={{
+                  fontSize: AppFontSize.xxxl,
+                  fontWeight: "bold",
+                  textAlign: "center"
+                }}
+              >
+                {mostNotesCreatedInDay.day}
+              </Heading>
+              <Paragraph
+                style={{
+                  fontSize: AppFontSize.md,
+                  textAlign: "center"
+                }}
+              >
+                {mostNotesCreatedInDay.count} notes
+              </Paragraph>
+            </View>
+          </View>
+        )}
+      </View>
+    </Slide>
+  );
+}
+
+// Most Used Tags Slide
+interface MostUsedTagsSlideProps {
+  tags?: WrappedStats["mostUsedTags"];
+  totalTags: WrappedStats["totalTags"];
+  width: number;
+}
+
+function MostUsedTagsSlide({ tags, totalTags, width }: MostUsedTagsSlideProps) {
+  const { colors } = useThemeColors();
+
+  if (!tags || tags.length === 0) return null;
+
+  return (
+    <Slide width={width}>
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.md,
+          color: colors.secondary.paragraph,
+          marginBottom: 20,
+          textAlign: "center"
+        }}
+      >
+        You created{" "}
+        <Paragraph
+          style={{
+            fontWeight: "bold",
+            color: colors.primary.accent,
+            fontSize: AppFontSize.lg
+          }}
+        >
+          {formatNumber(totalTags)}
+        </Paragraph>{" "}
+        {totalTags === 1 ? "tag" : "tags"}, your favorites
+      </Paragraph>
+      <View style={{ gap: DefaultAppStyles.GAP_VERTICAL, width: "100%" }}>
+        {tags.map((tag, index) => (
+          <View
+            key={tag.title}
+            style={{
+              backgroundColor: colors.secondary.background,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: 10,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center"
+            }}
+          >
+            <View style={{ flex: 1 }}>
+              <Heading
+                style={{
+                  fontSize: AppFontSize.lg,
+                  marginBottom: 5
+                }}
+              >
+                #{tag.title}
+              </Heading>
+              <Paragraph
+                style={{
+                  fontSize: AppFontSize.sm,
+                  color: colors.secondary.paragraph
+                }}
+              >
+                {formatNumber(tag.noteCount)} notes
+              </Paragraph>
+            </View>
+            <Paragraph
+              style={{
+                fontSize: AppFontSize.xxxl,
+                fontWeight: "bold",
+                color: colors.primary.accent
+              }}
+            >
+              {index + 1}
+            </Paragraph>
+          </View>
+        ))}
+      </View>
+    </Slide>
+  );
+}
+
+// Most Active Notebooks Slide
+interface MostActiveNotebooksSlideProps {
+  notebooks?: WrappedStats["mostActiveNotebooks"];
+  totalNotebooks: WrappedStats["totalNotebooks"];
+  width: number;
+}
+
+function MostActiveNotebooksSlide({
+  notebooks,
+  totalNotebooks,
+  width
+}: MostActiveNotebooksSlideProps) {
+  const { colors } = useThemeColors();
+
+  if (!notebooks || notebooks.length === 0) return null;
+
+  return (
+    <Slide width={width}>
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.md,
+          color: colors.secondary.paragraph,
+          marginBottom: 20,
+          textAlign: "center"
+        }}
+      >
+        You created{" "}
+        <Paragraph
+          style={{
+            fontWeight: "bold",
+            color: colors.primary.accent,
+            fontSize: AppFontSize.lg
+          }}
+        >
+          {formatNumber(totalNotebooks)}
+        </Paragraph>{" "}
+        {totalNotebooks === 1 ? "notebook" : "notebooks"}, your favorites
+      </Paragraph>
+      <View style={{ gap: DefaultAppStyles.GAP_VERTICAL, width: "100%" }}>
+        {notebooks.map((notebook, index) => (
+          <View
+            key={notebook.title}
+            style={{
+              backgroundColor: colors.secondary.background,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: 10,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center"
+            }}
+          >
+            <View style={{ flex: 1 }}>
+              <Heading
+                style={{
+                  fontSize: AppFontSize.lg,
+                  marginBottom: 5
+                }}
+              >
+                {notebook.title}
+              </Heading>
+              <Paragraph
+                style={{
+                  fontSize: AppFontSize.sm,
+                  color: colors.secondary.paragraph
+                }}
+              >
+                {formatNumber(notebook.noteCount)} notes
+              </Paragraph>
+            </View>
+            <Paragraph
+              style={{
+                fontSize: AppFontSize.xxxl,
+                fontWeight: "bold",
+                color: colors.primary.accent
+              }}
+            >
+              {index + 1}
+            </Paragraph>
+          </View>
+        ))}
+      </View>
+    </Slide>
+  );
+}
+
+// Attachments Slide
+interface AttachmentsSlideProps {
+  totalAttachments: WrappedStats["totalAttachments"];
+  totalStorageUsed: WrappedStats["totalStorageUsed"];
+  width: number;
+}
+
+function AttachmentsSlide({
+  totalAttachments,
+  totalStorageUsed,
+  width
+}: AttachmentsSlideProps) {
+  const { colors } = useThemeColors();
+
+  return (
+    <Slide width={width}>
+      <Heading
+        style={{
+          fontSize: AppFontSize.xxl,
+          fontWeight: "bold",
+          marginBottom: 20,
+          textAlign: "center"
+        }}
+      >
+        Attachments
+      </Heading>
+      <Heading
+        style={{
+          fontSize: 80,
+          fontWeight: "bold",
+          marginBottom: 10,
+          textAlign: "center",
+          color: colors.primary.accent
+        }}
+      >
+        {formatNumber(totalAttachments)}
+      </Heading>
+      <Paragraph
+        style={{
+          fontSize: AppFontSize.lg,
+          color: colors.secondary.paragraph,
+          textAlign: "center"
+        }}
+      >
+        files totaling {formatBytes(totalStorageUsed)}
+      </Paragraph>
+    </Slide>
+  );
+}
+
+// Summary Slide
+function SummarySlide({
+  stats,
+  width
+}: {
+  stats: WrappedStats;
+  width: number;
+}) {
+  const { colors } = useThemeColors();
+  const viewShotRef = useRef<ViewShot>(null);
+  const maxCount = Math.max(...Object.values(stats.monthlyStats), 1);
+
+  return (
+    <Slide width={width}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingBottom: 50
+        }}
+      >
+        <ViewShot
+          ref={viewShotRef}
+          options={{
+            fileName: `wrapped-${dayjs().year()}`,
+            format: "jpg",
+            quality: 1
+          }}
+        >
+          <View
+            style={{
+              padding: DefaultAppStyles.GAP
+            }}
+          >
+            <Heading
+              style={{
+                fontSize: AppFontSize.xxl,
+                fontWeight: "bold",
+                marginBottom: 30,
+                textAlign: "center",
+                marginTop: 30
+              }}
+            >
+              Notesnook Wrapped {dayjs().year()}
+            </Heading>
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_VERTICAL,
+                width: "100%"
+              }}
+            >
+              <View
+                style={{
+                  gap: DefaultAppStyles.GAP_VERTICAL
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "flex-end",
+                    justifyContent: "space-between",
+                    gap: 10
+                  }}
+                >
+                  {Object.keys(stats.monthlyStats).map((item) => (
+                    <View
+                      style={{
+                        flexGrow: 1,
+                        alignItems: "center"
+                      }}
+                    >
+                      <View
+                        style={{
+                          backgroundColor: colors.primary.accent,
+                          height:
+                            maxCount > 0
+                              ? (stats.monthlyStats[item] / maxCount) * 100
+                              : 0,
+                          borderTopLeftRadius: 3,
+                          borderTopRightRadius: 3,
+                          width: "100%"
+                        }}
+                      />
+
+                      <Paragraph size={9}>{item.slice(0, 3)}</Paragraph>
+                    </View>
+                  ))}
+                </View>
+                <Heading
+                  style={{
+                    textAlign: "center"
+                  }}
+                  size={AppFontSize.sm}
+                >
+                  Notes per month
+                </Heading>
+              </View>
+
+              {stats.totalWords > 0 && (
+                <View
+                  style={{
+                    backgroundColor: colors.secondary.background,
+                    padding: DefaultAppStyles.GAP,
+                    borderRadius: 10
+                  }}
+                >
+                  <Paragraph
+                    style={{
+                      textAlign: "center",
+                      fontSize: 40
+                    }}
+                  >
+                    ✍️
+                  </Paragraph>
+                  <Heading
+                    style={{
+                      fontSize: AppFontSize.xxxl,
+                      fontWeight: "bold",
+                      textAlign: "center",
+                      color: colors.primary.accent
+                    }}
+                  >
+                    {formatNumber(stats.totalWords)}
+                  </Heading>
+                  <Paragraph
+                    style={{
+                      fontSize: AppFontSize.sm,
+                      marginBottom: 5,
+                      textAlign: "center"
+                    }}
+                  >
+                    Words written
+                  </Paragraph>
+                </View>
+              )}
+
+              <View
+                style={{
+                  flexWrap: "wrap",
+                  flexDirection: "row",
+                  gap: 10,
+                  justifyContent: "space-between"
+                }}
+              >
+                {[
+                  {
+                    title: "Notes",
+                    count: stats.totalNotes,
+                    emoji: "📝"
+                  },
+                  {
+                    title: "Notebooks",
+                    count: stats.totalNotebooks,
+                    emoji: "📚"
+                  },
+                  {
+                    title: "Files",
+                    count: stats.totalAttachments,
+                    emoji: "📂"
+                  },
+                  {
+                    title: "Tags",
+                    count: stats.totalTags,
+                    emoji: "🏷️"
+                  },
+                  {
+                    title: "Monographs",
+                    count: stats.totalMonographs,
+                    emoji: "☁️"
+                  },
+                  {
+                    title: "Colors",
+                    count: stats.totalColors,
+                    emoji: "🟡"
+                  }
+                ].map((item) => (
+                  <View
+                    style={{
+                      backgroundColor: colors.secondary.background,
+                      padding: DefaultAppStyles.GAP_SMALL,
+                      borderRadius: 10,
+                      width: "31%"
+                    }}
+                  >
+                    <Paragraph
+                      style={{
+                        textAlign: "center",
+                        fontSize: AppFontSize.lg
+                      }}
+                    >
+                      {item.emoji}
+                    </Paragraph>
+                    <Heading
+                      style={{
+                        fontSize: AppFontSize.xl,
+                        fontWeight: "bold",
+                        textAlign: "center"
+                      }}
+                    >
+                      {formatNumber(item.count)}
+                    </Heading>
+
+                    <Paragraph
+                      style={{
+                        fontSize: AppFontSize.sm,
+                        color: colors.secondary.paragraph,
+                        marginBottom: 5,
+                        textAlign: "center"
+                      }}
+                    >
+                      {item.title}
+                    </Paragraph>
+                  </View>
+                ))}
+              </View>
+
+              <View
+                style={{
+                  backgroundColor: colors.secondary.background,
+                  padding: DefaultAppStyles.GAP,
+                  borderRadius: 10,
+                  gap: DefaultAppStyles.GAP_VERTICAL
+                }}
+              >
+                <Heading size={AppFontSize.md}>Fun facts of the year</Heading>
+
+                {stats.mostNotesCreatedInMonth && (
+                  <View>
+                    <Paragraph
+                      style={{
+                        fontSize: AppFontSize.sm,
+                        color: colors.primary.paragraph
+                      }}
+                    >
+                      Your most productive month was{" "}
+                      <Heading
+                        size={AppFontSize.sm}
+                        color={colors.primary.accent}
+                      >
+                        {stats.mostNotesCreatedInMonth.month}
+                      </Heading>
+                    </Paragraph>
+                  </View>
+                )}
+                {stats.mostNotesCreatedInDay && (
+                  <View>
+                    <Paragraph
+                      style={{
+                        fontSize: AppFontSize.sm,
+                        color: colors.primary.paragraph
+                      }}
+                    >
+                      Your favorite day to write was{" "}
+                      <Heading
+                        size={AppFontSize.sm}
+                        color={colors.primary.accent}
+                      >
+                        {stats.mostNotesCreatedInDay.day}
+                      </Heading>
+                    </Paragraph>
+                  </View>
+                )}
+
+                {stats.largestNote && (
+                  <View>
+                    <Paragraph
+                      style={{
+                        fontSize: AppFontSize.sm,
+                        color: colors.primary.paragraph
+                      }}
+                    >
+                      Your largest note was{" "}
+                      <Heading
+                        size={AppFontSize.sm}
+                        color={colors.primary.accent}
+                      >
+                        {formatNumber(stats.largestNote.length)} words
+                      </Heading>
+                    </Paragraph>
+                  </View>
+                )}
+
+                {stats.largestNote && (
+                  <View>
+                    <Paragraph
+                      style={{
+                        fontSize: AppFontSize.sm,
+                        color: colors.primary.paragraph
+                      }}
+                    >
+                      Your largest attachment was{" "}
+                      <Heading
+                        size={AppFontSize.sm}
+                        color={colors.primary.accent}
+                      >
+                        {formatBytes(stats.largestAttachment?.size || 0, 1)}
+                      </Heading>
+                    </Paragraph>
+                  </View>
+                )}
+              </View>
+
+              <Paragraph
+                style={{
+                  textAlign: "center",
+                  color: colors.secondary.paragraph
+                }}
+              >
+                Generated 100% locally on your device.
+              </Paragraph>
+            </View>
+          </View>
+        </ViewShot>
+
+        <Button
+          title="Share with friends"
+          type="secondaryAccented"
+          onPress={async () => {
+            const path = await viewShotRef.current?.capture?.();
+            Share.open({
+              url: path
+            }).catch(() => {});
+          }}
+          style={{
+            width: 200
+          }}
+        />
+      </ScrollView>
+    </Slide>
+  );
+}
+
+// Main Wrapped Component
+export const Wrapped = ({ navigation, route }: NavigationProps<"Wrapped">) => {
+  const { colors } = useThemeColors();
+  const { width } = useWindowDimensions();
+  const [loading, setLoading] = useState(true);
+  const [wrapped, setWrapped] = useState<WrappedStats | null>(null);
+  const [showPresentation, setShowPresentation] = useState(false);
+  const [messageIndex, setMessageIndex] = useState(0);
+  const insets = useGlobalSafeAreaInsets();
+  useNavigationFocus(navigation, { focusOnInit: true });
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (loading) {
+      setMessageIndex(0);
+      interval = setInterval(() => {
+        setMessageIndex((prev) => (prev + 1) % loadingMessages.length);
+      }, 4000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [loading]);
+
+  async function loadWrapped() {
+    setLoading(true);
+    try {
+      const wrappedData = await db.wrapped.get();
+      setWrapped(wrappedData);
+      setShowPresentation(true);
+    } catch (error) {
+      console.error("Error loading wrapped:", error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadWrapped();
+  }, []);
+
+  // Build slides array
+  const slides: React.ReactNode[] = [];
+  if (wrapped && showPresentation) {
+    slides.push(<WelcomeSlide key="welcome" width={width} />);
+    slides.push(
+      <TotalNotesSlide
+        key="total-notes"
+        count={wrapped.totalNotes}
+        width={width}
+      />
+    );
+
+    if (wrapped.totalWords > 0) {
+      slides.push(
+        <TotalWordsSlide
+          key="total-words"
+          count={wrapped.totalWords}
+          width={width}
+        />
+      );
+    }
+
+    if (wrapped.mostNotesCreatedInMonth || wrapped.mostNotesCreatedInDay) {
+      slides.push(
+        <ActivityStatsSlide
+          key="activity"
+          mostNotesCreatedInMonth={wrapped.mostNotesCreatedInMonth}
+          mostNotesCreatedInDay={wrapped.mostNotesCreatedInDay}
+          width={width}
+        />
+      );
+    }
+
+    // if (wrapped.mostUsedTags && wrapped.mostUsedTags.length > 0) {
+    //   slides.push(
+    //     <MostUsedTagsSlide
+    //       key="tags"
+    //       tags={wrapped.mostUsedTags}
+    //       totalTags={wrapped.totalTags}
+    //       width={width}
+    //     />
+    //   );
+    // }
+
+    // if (wrapped.mostActiveNotebooks && wrapped.mostActiveNotebooks.length > 0) {
+    //   slides.push(
+    //     <MostActiveNotebooksSlide
+    //       key="notebooks"
+    //       notebooks={wrapped.mostActiveNotebooks}
+    //       totalNotebooks={wrapped.totalNotebooks}
+    //       width={width}
+    //     />
+    //   );
+    // }
+
+    // if (wrapped.totalAttachments > 0) {
+    //   slides.push(
+    //     <AttachmentsSlide
+    //       key="attachments"
+    //       totalAttachments={wrapped.totalAttachments}
+    //       totalStorageUsed={wrapped.totalStorageUsed}
+    //       width={width}
+    //     />
+    //   );
+    // }
+
+    slides.push(<SummarySlide key="summary" stats={wrapped} width={width} />);
+  }
+
+  if (showPresentation && wrapped) {
+    return (
+      <SafeAreaView
+        style={{
+          flex: 1,
+          backgroundColor: colors.primary.background
+        }}
+      >
+        <View
+          style={{
+            position: "absolute",
+            top: insets.top + 5,
+            right: DefaultAppStyles.GAP,
+            zIndex: 1000
+          }}
+        >
+          <IconButton
+            name="close"
+            color={colors.primary.icon}
+            type="secondary"
+            onPress={() => {
+              setShowPresentation(false);
+              Navigation.goBack();
+            }}
+          />
+        </View>
+
+        <PolkadotBackground
+          width={Dimensions.get("window").width}
+          height={Dimensions.get("window").height}
+          dotColor={colors.primary.icon}
+          opacity={0.5}
+        />
+        <SwiperFlatList
+          autoplay={false}
+          index={0}
+          showPagination={true}
+          paginationActiveColor={colors.primary.accent}
+          paginationStyleItem={{
+            width: 10,
+            height: 5,
+            marginRight: 4,
+            marginLeft: 4
+          }}
+          paginationDefaultColor={colors.primary.border}
+          paginationStyle={{
+            marginBottom: insets.bottom + 12,
+            backgroundColor: colors.primary.background,
+            borderRadius: 100,
+            paddingHorizontal: 12,
+            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+            alignItems: "center"
+          }}
+          data={slides}
+          renderItem={({ item }) => item}
+        />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: colors.primary.background
+      }}
+    >
+      <PolkadotBackground
+        width={Dimensions.get("window").width}
+        height={Dimensions.get("window").height}
+        dotColor={colors.primary.icon}
+        opacity={0.5}
+      />
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          paddingHorizontal: DefaultAppStyles.GAP
+        }}
+      >
+        <View
+          style={{
+            alignItems: "center",
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
+          <ActivityIndicator size="large" color={colors.primary.accent} />
+          <Paragraph
+            style={{
+              fontSize: AppFontSize.lg,
+              textAlign: "center",
+              color: colors.secondary.paragraph,
+              marginTop: 20
+            }}
+          >
+            {loadingMessages[messageIndex]}
+          </Paragraph>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export function PolkadotBackground({
+  width,
+  height,
+  spacing = 20,
+  dotSize = 3,
+  dotColor = "#E5E5E5",
+  opacity = 0.3
+}: {
+  width: number;
+  height: number;
+  spacing?: number;
+  dotSize?: number;
+  dotColor?: string;
+  opacity: number;
+}) {
+  const { colors } = useThemeColors();
+
+  // Create a simple dot pattern using absolute positioned views
+  const rows = Math.ceil(height / spacing);
+  const cols = Math.ceil(width / spacing);
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          backgroundColor: colors.primary.background,
+          overflow: "hidden",
+          opacity: opacity
+        }
+      ]}
+    >
+      {Array.from({ length: rows }).map((_, row) =>
+        Array.from({ length: cols }).map((_, col) => (
+          <View
+            key={`${row}-${col}`}
+            style={{
+              position: "absolute",
+              left: col * spacing,
+              top: row * spacing,
+              width: dotSize,
+              height: dotSize,
+              borderRadius: dotSize / 2,
+              backgroundColor: dotColor,
+              opacity: 0.3
+            }}
+          />
+        ))
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { overflow: "hidden", position: "absolute" }
+});
+
+export default Wrapped;
diff --git a/apps/mobile/app/services/navigation.ts b/apps/mobile/app/services/navigation.ts
index b3bb1a745..ce044aec8 100755
--- a/apps/mobile/app/services/navigation.ts
+++ b/apps/mobile/app/services/navigation.ts
@@ -71,7 +71,8 @@ const routeNames = {
   Archive: "Archive",
   ManageTags: "ManageTags",
   AddReminder: "AddReminder",
-  PayWall: "PayWall"
+  PayWall: "PayWall",
+  Wrapped: "Wrapped"
 };
 
 export type NavigationProps<T extends RouteName> = NativeStackScreenProps<
diff --git a/apps/mobile/app/stores/use-navigation-store.ts b/apps/mobile/app/stores/use-navigation-store.ts
index 857c6de7b..a385725b3 100644
--- a/apps/mobile/app/stores/use-navigation-store.ts
+++ b/apps/mobile/app/stores/use-navigation-store.ts
@@ -112,6 +112,7 @@ export interface RouteParams extends ParamListBase {
     context: "signup" | "logged-in" | "logged-out" | "subscribed";
     state?: BillingState;
   };
+  Wrapped: GenericRouteParam;
 }
 
 export type RouteName = keyof RouteParams;
diff --git a/apps/mobile/package-lock.json b/apps/mobile/package-lock.json
index b37ca26d7..d69598dbc 100644
--- a/apps/mobile/package-lock.json
+++ b/apps/mobile/package-lock.json
@@ -123,6 +123,7 @@
         "react-native-tooltips": "^1.0.3",
         "react-native-url-polyfill": "^2.0.0",
         "react-native-vector-icons": "10.3.0",
+        "react-native-view-shot": "^4.0.3",
         "react-native-webview": "^13.13.5",
         "react-native-wheel-color-picker": "^1.3.1",
         "react-native-worklets": "^0.7.1",
@@ -228,6 +229,7 @@
         "@streetwriters/kysely": "^0.27.4",
         "@streetwriters/showdown": "^3.0.9-alpha",
         "@types/mime-db": "^1.43.5",
+        "alfaaz": "^1.1.0",
         "async-mutex": "0.5.0",
         "dayjs": "1.11.13",
         "dom-serializer": "^2.0.0",
@@ -7498,6 +7500,15 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
       "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -8554,6 +8565,15 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
       "license": "MIT"
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-select": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
@@ -11634,6 +11654,19 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
@@ -18066,6 +18099,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-view-shot": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-4.0.3.tgz",
+      "integrity": "sha512-USNjYmED7C0me02c1DxKA0074Hw+y/nxo+xJKlffMvfUWWzL5ELh/TJA/pTnVqFurIrzthZDPtDM7aBFJuhrHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-webview": {
       "version": "13.16.0",
       "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.16.0.tgz",
@@ -20279,6 +20325,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thingies": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz",
@@ -21090,6 +21145,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index fd8c5ff1c..034aa2895 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -139,6 +139,7 @@
     "react-native-tooltips": "^1.0.3",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "10.3.0",
+    "react-native-view-shot": "^4.0.3",
     "react-native-webview": "^13.13.5",
     "react-native-wheel-color-picker": "^1.3.1",
     "react-native-worklets": "^0.7.1",