Improve docs

Author: MarceloPrado

.vscode/settings.json

@@ -8,5 +8,9 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
   }
 }

apps/docs/docs/fundamentals/tips-and-tricks.mdx

@@ -166,3 +166,39 @@ user system's theme.
 **Note**: you should avoid using this prop. Instead, your app should
 support dynamic themes that react to the user's system preferences. The prop is
 provided as an escape hatch for apps that doesn't support dynamic themes yet.
+
+## Listening to the visible months
+
+You can listen to which months are currently visible by hooking into the [`onViewableItemsChange`](https://shopify.github.io/flash-list/docs/usage#onviewableitemschanged) prop:
+
+```tsx
+export const ListenToVisibleMonth = () => {
+  const [selectedDate, setSelectedDate] = useState(today);
+  const [visibleMonth, setVisibleMonth] = useState(today);
+
+  const handleViewableItemsChanged = useCallback<
+    NonNullable<FlashListProps<CalendarMonth>["onViewableItemsChanged"]>
+  >(({ viewableItems }) => {
+    const firstVisibleItem = viewableItems.find((item) => item.isViewable);
+
+    if (firstVisibleItem) {
+      setVisibleMonth(firstVisibleItem.item.id);
+    }
+  }, []);
+
+  return (
+    <View style={{ flex: 1, gap: 24 }}>
+      <View style={{ gap: 12 }}>
+        <Text>Selected date: {selectedDate}</Text>
+        <Text>Visible month: {visibleMonth}</Text>
+      </View>
+      <Calendar.List
+        calendarActiveDateRanges={[{ startId: today, endId: today }]}
+        calendarInitialMonthId="2024-11-01"
+        onCalendarDayPress={setSelectedDate}
+        onViewableItemsChanged={handleViewableItemsChanged}
+      />
+    </View>
+  );
+};
+```

apps/example/src/components/GithubIssues/CalendarListGithubIssues.stories.tsx

@@ -1,12 +1,15 @@
 import type {
+  CalendarMonth,
   CalendarOnDayPress,
   CalendarTheme,
 } from "@marceloterreiro/flash-calendar";
 import { Calendar, toDateId } from "@marceloterreiro/flash-calendar";
+import type { FlashListProps } from "@shopify/flash-list";
 import type { Meta } from "@storybook/react";
-import React, { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Alert, Text, View } from "react-native";
 import { useTheme } from "@/hooks/useTheme";
+import { VStack } from "@/components/VStack";
 
 const CalendarMeta: Meta<typeof Calendar> = {
   title: "Calendar.List/Github Issues",
@@ -124,3 +127,34 @@ export const Issue38 = () => {
     </View>
   );
 };
+
+// See more at: https://github.com/MarceloPrado/flash-calendar/issues/65
+export const ListenToVisibleMonth = () => {
+  const [selectedDate, setSelectedDate] = useState(today);
+  const [visibleMonth, setVisibleMonth] = useState(today);
+
+  const handleViewableItemsChanged = useCallback<
+    NonNullable<FlashListProps<CalendarMonth>["onViewableItemsChanged"]>
+  >(({ viewableItems }) => {
+    const firstVisibleItem = viewableItems.find((item) => item.isViewable);
+
+    if (firstVisibleItem) {
+      setVisibleMonth(firstVisibleItem.item.id);
+    }
+  }, []);
+
+  return (
+    <View style={{ flex: 1, gap: 24 }}>
+      <View style={{ gap: 12 }}>
+        <Text>Selected date: {selectedDate}</Text>
+        <Text>Visible month: {visibleMonth}</Text>
+      </View>
+      <Calendar.List
+        calendarActiveDateRanges={[{ startId: today, endId: today }]}
+        calendarInitialMonthId="2024-06-01"
+        onCalendarDayPress={setSelectedDate}
+        onViewableItemsChanged={handleViewableItemsChanged}
+      />
+    </View>
+  );
+};