expo-year-date-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jyuuroku16
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# expo-year-date-picker
+
+A smooth, high-performance, and native-feeling Year and Month picker for React Native, optimized for Expo.
+
+![Picker Demo](https://raw.githubusercontent.com/jyuuroku16/Tonari/main/docs/picker-demo.png) _(Placeholder)_
+
+## Features
+
+- 🚀 **High Performance**: Built with `react-native-reanimated` and `react-native-gesture-handler` for butter-smooth 60 FPS interactions.
+- ✨ **Beautiful Design**: Features built-in glassmorphism (BlurView) and gradient masking for a premium aesthetic.
+- 📱 **Native Interactions**: Supports drag-to-dismiss gestures and elastic scrolling.
+- 🎨 **Highly Customizable**: Fully controlled component, easy to integrate into any design system.
+- 🧩 **Isolated & Clean**: ZERO dependencies on specific UI frameworks or global states.
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add expo-year-date-picker
+
+# Using npm
+npm install expo-year-date-picker
+
+### Peer Dependencies
+
+This package requires the following libraries. Ensure they are installed in your project:
+
+- `react-native-reanimated`
+- `react-native-gesture-handler`
+- `react-native-safe-area-context`
+- `react-native-screens`
+- `expo-blur`
+- `expo-haptics`
+- `expo-symbols`
+- `expo-linear-gradient`
+- `nativewind`
+- `tailwindcss`
+- `@react-native-masked-view/masked-view`
+
+## NativeWind Configuration
+
+Since this component uses NativeWind for styling, you **MUST** add the package's source path to your `tailwind.config.js` for styles to be compiled correctly:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./App.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // ADD THIS LINE
+    "./node_modules/expo-year-date-picker/src/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  // ... other configs
+};
+```
+
+## Quick Start
+
+```tsx
+import React, { useState } from "react";
+import { YearDatePicker, getMonthName } from "expo-year-date-picker";
+
+const MyComponent = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Select Date" onPress={() => setIsVisible(true)} />
+
+      <YearDatePicker
+        isVisible={isVisible}
+        onClose={() => setIsVisible(false)}
+        initialYear={2024}
+        initialMonth={7}
+        availableYears={[2024, 2023, 2022]}
+        availableMonthsByYear={
+          new Map([
+            [
+              2024,
+              [
+                { month: 7, name: "Jul" },
+                { month: 8, name: "Aug" },
+              ],
+            ],
+            // ...other years
+          ])
+        }
+        onConfirm={(year, month) => {
+          console.log("Selected:", year, month);
+          setIsVisible(false);
+        }}
+        // (Optional) Haptic feedback
+        // fireHaptic={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
+      />
+    </>
+  );
+};
+```
+
+## API Reference
+
+### `YearDatePicker` Props
+
+| Prop                    | Type                                    | Description                                                              |
+| :---------------------- | :-------------------------------------- | :----------------------------------------------------------------------- |
+| `isVisible`             | `boolean`                               | Controls the visibility of the picker.                                   |
+| `onClose`               | `() => void`                            | Triggered when the picker requests to close (backdrop tap or pull down). |
+| `initialYear`           | `number`                                | The initially selected year.                                             |
+| `initialMonth`          | `number \| null`                        | The initially selected month (1-12).                                     |
+| `availableYears`        | `number[]`                              | List of years available for selection.                                   |
+| `availableMonthsByYear` | `Map<number, MonthInfo[]>`              | Map of available months for each year.                                   |
+| `onConfirm`             | `(year: number, month: number) => void` | Callback triggered when the confirm button is pressed.                   |
+| `fireHaptic`            | `() => void`                            | (Optional) Callback triggered during scroll for haptic feedback.         |
+
+### Helper Functions
+
+- `getMonthName(month: number, short?: boolean)`: Get the English month name.
+
+## License
+
+MIT License

package/example/index.tsx

@@ -0,0 +1,73 @@
+import * as Haptics from "expo-haptics";
+import React, { useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+
+import { getMonthName, type MonthInfo, YearDatePicker } from "../src";
+
+const Example = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [selectedDate, setSelectedDate] = useState({
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+  });
+
+  // Generate available years (e.g., from 1970 to now)
+  const availableYears = useMemo(() => {
+    const years = [];
+    const currentYear = new Date().getFullYear();
+    for (let i = currentYear; i >= 1970; i--) {
+      years.push(i);
+    }
+    return years;
+  }, []);
+
+  // Generate months for each year
+  const availableMonthsByYear = useMemo(() => {
+    const map = new Map<number, MonthInfo[]>();
+    availableYears.forEach((year) => {
+      const months: MonthInfo[] = [];
+      for (let m = 1; m <= 12; m++) {
+        months.push({
+          month: m,
+          name: getMonthName(m, true), // Short names: Jan, Feb, etc.
+        });
+      }
+      map.set(year, months);
+    });
+    return map;
+  }, [availableYears]);
+
+  const handleConfirm = (year: number, month: number) => {
+    setSelectedDate({ year, month });
+  };
+
+  const fireHaptic = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  };
+
+  return (
+    <View className="flex-1 items-center justify-center">
+      <Pressable
+        onPress={() => setIsVisible(true)}
+        className="px-8 py-4 bg-black dark:bg-white rounded-full active:opacity-70"
+      >
+        <Text className="text-white dark:text-black font-bold text-xl">
+          {selectedDate.year} . {selectedDate.month.toString().padStart(2, "0")}
+        </Text>
+      </Pressable>
+
+      <YearDatePicker
+        isVisible={isVisible}
+        onClose={() => setIsVisible(false)}
+        initialYear={selectedDate.year}
+        initialMonth={selectedDate.month}
+        availableYears={availableYears}
+        availableMonthsByYear={availableMonthsByYear}
+        onConfirm={handleConfirm}
+        fireHaptic={fireHaptic}
+      />
+    </View>
+  );
+};
+
+export default Example;

package/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "expo-year-date-picker",
+  "version": "1.0.0",
+  "description": "A simple year and month picker for React Native.",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "date-picker",
+    "year-picker",
+    "reanimated"
+  ],
+  "author": "jyuuroku16",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jyuuroku16/expo-year-date-picker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jyuuroku16/expo-year-date-picker/issues"
+  },
+  "homepage": "https://github.com/jyuuroku16/expo-year-date-picker#readme",
+  "files": [
+    "src",
+    "example",
+    "README.md",
+    "nativewind-env.d.ts",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "expo-blur": "^15.0.8",
+    "expo-haptics": "~15.0.8",
+    "expo-linear-gradient": "^15.0.8",
+    "expo-symbols": "~1.0.8",
+    "nativewind": "^4.2.1",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.2.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "4.20.0",
+    "react-native-worklets": "^0.7.0",
+    "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/react": "19.1.0",
+    "typescript": "~5.9.2"
+  }
+}

package/src/components/year-date-picker.tsx

@@ -0,0 +1,493 @@
+import MaskedView from "@react-native-masked-view/masked-view";
+import { BlurView } from "expo-blur";
+import { LinearGradient } from "expo-linear-gradient";
+import { SymbolView } from "expo-symbols";
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Extrapolate,
+  FadeIn,
+  interpolate,
+  interpolateColor,
+  SlideInUp,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FullWindowOverlay } from "react-native-screens";
+import { runOnJS, scheduleOnRN } from "react-native-worklets";
+
+import { easeGradient } from "../ease-gradient";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const ITEM_WIDTH = 80;
+const ITEM_GAP = 12;
+const SNAP_INTERVAL = ITEM_WIDTH + ITEM_GAP;
+
+export interface MonthInfo {
+  month: number;
+  name: string;
+}
+
+export interface YearDate {
+  year: number;
+  month: number;
+}
+
+export interface YearDatePickerProps {
+  isVisible: boolean;
+  onClose: () => void;
+  initialYear: number;
+  initialMonth: number | null;
+  availableYears: number[];
+  availableMonthsByYear: Map<number, MonthInfo[]>;
+  onConfirm: (year: number, month: number) => void;
+  fireHaptic?: () => void;
+}
+
+export const YearDatePicker: FC<YearDatePickerProps> = ({
+  isVisible,
+  onClose,
+  initialYear,
+  initialMonth,
+  availableYears,
+  availableMonthsByYear,
+  onConfirm,
+  fireHaptic,
+}) => {
+  const insets = useSafeAreaInsets();
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  // Local state for logic
+  const [selectedYear, setSelectedYear] = useState<number>(initialYear);
+  const [selectedMonth, setSelectedMonth] = useState<number | null>(initialMonth);
+
+  // Refs for scroll alignment
+  const yearListRef = useRef<Animated.FlatList<number>>(null);
+  const monthListRef = useRef<Animated.FlatList<MonthInfo>>(null);
+
+  // Animation shared values
+  const yearScrollX = useSharedValue(0);
+  const monthScrollX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const opacityAlpha = useSharedValue(0);
+
+  // Shared values to track index for haptics
+  const lastYearHapticIndex = useSharedValue(0);
+  const lastMonthHapticIndex = useSharedValue(0);
+
+  const triggerHaptic = () => {
+    fireHaptic?.();
+  };
+
+  const onScrollYearEvent = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      yearScrollX.value = event.contentOffset.x;
+      const index = Math.round(event.contentOffset.x / SNAP_INTERVAL);
+      if (index !== lastYearHapticIndex.value) {
+        lastYearHapticIndex.value = index;
+        if (fireHaptic) scheduleOnRN(triggerHaptic);
+      }
+    },
+  });
+
+  const onScrollMonthEvent = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      monthScrollX.value = event.contentOffset.x;
+      const index = Math.round(event.contentOffset.x / SNAP_INTERVAL);
+      if (index !== lastMonthHapticIndex.value) {
+        lastMonthHapticIndex.value = index;
+        if (fireHaptic) scheduleOnRN(triggerHaptic);
+      }
+    },
+  });
+
+  const horizontalPadding = (SCREEN_WIDTH - ITEM_WIDTH) / 2;
+
+  useEffect(() => {
+    if (isVisible) {
+      // Reset animations to start state
+      translateY.value = 0;
+      opacityAlpha.value = withSpring(1);
+
+      const timer = setTimeout(() => {
+        const yearIndex = availableYears.indexOf(initialYear);
+        if (yearIndex !== -1) {
+          yearListRef.current?.scrollToIndex({
+            index: yearIndex,
+            animated: false,
+            viewOffset: horizontalPadding,
+          });
+          yearScrollX.value = yearIndex * SNAP_INTERVAL;
+          lastYearHapticIndex.value = yearIndex;
+        }
+
+        if (initialMonth) {
+          const months = availableMonthsByYear.get(initialYear) || [];
+          const monthIndex = months.findIndex((m) => m.month === initialMonth);
+          if (monthIndex !== -1) {
+            monthListRef.current?.scrollToIndex({
+              index: monthIndex,
+              animated: false,
+              viewOffset: horizontalPadding,
+            });
+            monthScrollX.value = monthIndex * SNAP_INTERVAL;
+            lastMonthHapticIndex.value = monthIndex;
+          }
+        }
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [
+    isVisible,
+    initialYear,
+    initialMonth,
+    availableYears,
+    availableMonthsByYear,
+    horizontalPadding,
+    lastMonthHapticIndex,
+    lastYearHapticIndex,
+    monthScrollX,
+    opacityAlpha,
+    yearScrollX,
+    translateY,
+  ]);
+
+  const currentYearMonths = React.useMemo(
+    () => (selectedYear ? (availableMonthsByYear.get(selectedYear) ?? []) : []),
+    [selectedYear, availableMonthsByYear]
+  );
+
+  const handleDismiss = useCallback(() => {
+    translateY.value = withSpring(-300, { damping: 20 });
+    opacityAlpha.value = withTiming(0, { duration: 250 }, (finished) => {
+      if (finished) {
+        runOnJS(onClose)();
+      }
+    });
+  }, [onClose, opacityAlpha, translateY]);
+
+  const pan = Gesture.Pan()
+    .onChange((e) => {
+      if (e.translationY < 0) {
+        translateY.value = e.translationY;
+      } else {
+        translateY.value = 0;
+      }
+    })
+    .onEnd((e) => {
+      if (e.translationY < -50 || e.velocityY < -500) {
+        runOnJS(handleDismiss)();
+      } else {
+        translateY.value = withSpring(0);
+      }
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacityAlpha.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  const handleConfirm = () => {
+    if (selectedYear && selectedMonth) {
+      onConfirm(selectedYear, selectedMonth);
+    }
+    handleDismiss();
+  };
+
+  const onScrollYear = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const centerIndex = Math.round(offsetX / SNAP_INTERVAL);
+      const safeIndex = Math.max(0, Math.min(centerIndex, availableYears.length - 1));
+      const year = availableYears[safeIndex];
+
+      if (year && year !== selectedYear) {
+        setSelectedYear(year);
+        const months = availableMonthsByYear.get(year) || [];
+        if (months.length > 0) {
+          const hasCurrentMonth = months.some((m) => m.month === selectedMonth);
+          if (!hasCurrentMonth) {
+            setSelectedMonth(months[0].month);
+          }
+        }
+      }
+    },
+    [availableYears, selectedYear, availableMonthsByYear, selectedMonth]
+  );
+
+  const onScrollMonth = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const centerIndex = Math.round(offsetX / SNAP_INTERVAL);
+      const safeIndex = Math.max(0, Math.min(centerIndex, currentYearMonths.length - 1));
+      const monthInfo = currentYearMonths[safeIndex];
+
+      if (monthInfo && monthInfo.month !== selectedMonth) {
+        setSelectedMonth(monthInfo.month);
+      }
+    },
+    [currentYearMonths, selectedMonth]
+  );
+
+  const YearItem = ({ item, index }: { item: number; index: number }) => {
+    const animatedItemStyle = useAnimatedStyle(() => {
+      const distance = Math.abs(index * SNAP_INTERVAL - yearScrollX.value);
+      const scale = interpolate(distance, [0, SNAP_INTERVAL], [1.15, 1.0], Extrapolate.CLAMP);
+      const opacity = interpolate(distance, [0, SNAP_INTERVAL], [1, 0.4], Extrapolate.CLAMP);
+      return { opacity, transform: [{ scale }] };
+    });
+
+    const animatedTextStyle = useAnimatedStyle(() => {
+      const distance = Math.abs(index * SNAP_INTERVAL - yearScrollX.value);
+      const color = interpolateColor(
+        distance,
+        [0, SNAP_INTERVAL],
+        [isDark ? "#fff" : "#000", isDark ? "#666" : "#a3a3a3"]
+      );
+      return { color };
+    });
+
+    const isLast = index === availableYears.length - 1;
+
+    return (
+      <Pressable
+        onPress={() => {
+          yearListRef.current?.scrollToIndex({
+            index,
+            viewOffset: horizontalPadding,
+            animated: true,
+          });
+        }}
+        style={{ width: ITEM_WIDTH, marginRight: isLast ? 0 : ITEM_GAP }}
+        className="items-center justify-center"
+      >
+        <Animated.View style={animatedItemStyle} className="items-center justify-center">
+          <Animated.Text
+            style={[
+              { fontFamily: "ui-rounded", fontSize: 20, fontWeight: "700", textAlign: "center" },
+              animatedTextStyle,
+            ]}
+          >
+            {item}
+          </Animated.Text>
+        </Animated.View>
+      </Pressable>
+    );
+  };
+
+  const MonthItem = ({ item, index }: { item: MonthInfo; index: number }) => {
+    const animatedTextStyle = useAnimatedStyle(() => {
+      const distance = Math.abs(index * SNAP_INTERVAL - monthScrollX.value);
+      const scale = interpolate(distance, [0, SNAP_INTERVAL], [1.05, 0.95], Extrapolate.CLAMP);
+      const color = interpolateColor(
+        distance,
+        [0, SNAP_INTERVAL / 2, SNAP_INTERVAL],
+        [isDark ? "#000" : "#fff", isDark ? "#fff" : "#000", isDark ? "#a3a3a3" : "#525252"]
+      );
+      return { color, transform: [{ scale }] };
+    });
+
+    const isLast = index === currentYearMonths.length - 1;
+
+    return (
+      <Pressable
+        onPress={() => {
+          monthListRef.current?.scrollToIndex({
+            index,
+            viewOffset: horizontalPadding,
+            animated: true,
+          });
+        }}
+        style={{ width: ITEM_WIDTH, marginRight: isLast ? 0 : ITEM_GAP }}
+        className="items-center justify-center h-14"
+      >
+        <Animated.Text
+          style={[
+            { fontFamily: "ui-rounded", fontSize: 16, fontWeight: "600", textAlign: "center" },
+            animatedTextStyle,
+          ]}
+        >
+          {item.name}
+        </Animated.Text>
+      </Pressable>
+    );
+  };
+
+  const { colors: maskColors, locations: maskLocations } = easeGradient({
+    colorStops: {
+      0: { color: "rgba(0,0,0,0)" },
+      0.35: { color: "rgba(0,0,0,1)" },
+      0.65: { color: "rgba(0,0,0,1)" },
+      1: { color: "rgba(0,0,0,0)" },
+    },
+  });
+
+  if (!isVisible) return null;
+
+  return (
+    <FullWindowOverlay>
+      <View style={StyleSheet.absoluteFill}>
+        <Animated.View entering={FadeIn.duration(200)} style={StyleSheet.absoluteFill}>
+          <Animated.View style={[StyleSheet.absoluteFill, { opacity: opacityAlpha }]}>
+            <Pressable style={StyleSheet.absoluteFill} onPress={handleDismiss}>
+              <View className="flex-1 bg-black/30" />
+            </Pressable>
+          </Animated.View>
+        </Animated.View>
+
+        <Animated.View
+          entering={SlideInUp.springify()}
+          style={StyleSheet.absoluteFill}
+          pointerEvents="box-none"
+        >
+          <GestureDetector gesture={pan}>
+            <Animated.View
+              style={[styles.sheet, { paddingTop: insets.top + 10 }, animatedStyle]}
+              className="bg-white dark:bg-neutral-900 overflow-hidden rounded-b-[32px]"
+            >
+              <BlurView
+                intensity={80}
+                tint={isDark ? "dark" : "light"}
+                style={StyleSheet.absoluteFill}
+              />
+
+              <View className="pb-4 gap-2">
+                <View className="relative flex-row items-center h-[60px]">
+                  <MaskedView
+                    style={{ flex: 1, height: 60 }}
+                    maskElement={
+                      <LinearGradient
+                        colors={maskColors}
+                        locations={maskLocations}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                        style={{ flex: 1 }}
+                      />
+                    }
+                  >
+                    <Animated.FlatList
+                      ref={yearListRef}
+                      data={availableYears}
+                      horizontal
+                      showsHorizontalScrollIndicator={false}
+                      keyExtractor={(item) => item.toString()}
+                      snapToInterval={SNAP_INTERVAL}
+                      snapToAlignment="start"
+                      decelerationRate="fast"
+                      onScroll={onScrollYearEvent}
+                      onMomentumScrollEnd={onScrollYear}
+                      contentContainerStyle={{ paddingHorizontal: horizontalPadding }}
+                      scrollEventThrottle={16}
+                      getItemLayout={(_, index) => ({
+                        length: SNAP_INTERVAL,
+                        offset: horizontalPadding + SNAP_INTERVAL * index,
+                        index,
+                      })}
+                      renderItem={({ item, index }) => <YearItem item={item} index={index} />}
+                      style={{ flex: 1, backgroundColor: "transparent" }}
+                    />
+                  </MaskedView>
+
+                  <View
+                    className="absolute bottom-2 h-1 w-6 bg-black dark:bg-white rounded-full z-10"
+                    style={{ left: SCREEN_WIDTH / 2 - 12 }}
+                  />
+
+                  <View className="absolute right-4">
+                    <Pressable onPress={handleConfirm} className="p-2">
+                      <SymbolView
+                        name="checkmark.circle.fill"
+                        size={36}
+                        tintColor={isDark ? "#fff" : "#000"}
+                        fallback={
+                          <View className="w-7 h-7 rounded-full bg-black dark:bg-white items-center justify-center">
+                            <Text className="text-white dark:text-black text-xs">✓</Text>
+                          </View>
+                        }
+                      />
+                    </Pressable>
+                  </View>
+                </View>
+
+                <View className="relative h-14 justify-center">
+                  <View
+                    className="absolute bg-black dark:bg-white rounded-full h-11"
+                    style={{
+                      left: SCREEN_WIDTH / 2 - ITEM_WIDTH / 2,
+                      width: ITEM_WIDTH,
+                    }}
+                  />
+
+                  <MaskedView
+                    style={{ flex: 1, height: 56 }}
+                    maskElement={
+                      <LinearGradient
+                        colors={maskColors}
+                        locations={maskLocations}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 0 }}
+                        style={{ flex: 1 }}
+                      />
+                    }
+                  >
+                    <Animated.FlatList
+                      ref={monthListRef}
+                      data={currentYearMonths}
+                      horizontal
+                      showsHorizontalScrollIndicator={false}
+                      keyExtractor={(item) => item.month.toString()}
+                      snapToInterval={SNAP_INTERVAL}
+                      snapToAlignment="start"
+                      decelerationRate="fast"
+                      onScroll={onScrollMonthEvent}
+                      onMomentumScrollEnd={onScrollMonth}
+                      contentContainerStyle={{ paddingHorizontal: horizontalPadding }}
+                      scrollEventThrottle={16}
+                      getItemLayout={(_, index) => ({
+                        length: SNAP_INTERVAL,
+                        offset: horizontalPadding + SNAP_INTERVAL * index,
+                        index,
+                      })}
+                      renderItem={({ item, index }) => <MonthItem item={item} index={index} />}
+                      style={{ flex: 1, backgroundColor: "transparent" }}
+                    />
+                  </MaskedView>
+                </View>
+              </View>
+
+              <View className="items-center pb-3">
+                <View className="w-10 h-1 bg-neutral-300/50 dark:bg-neutral-600/50 rounded-full" />
+              </View>
+            </Animated.View>
+          </GestureDetector>
+        </Animated.View>
+      </View>
+    </FullWindowOverlay>
+  );
+};
+
+const styles = StyleSheet.create({
+  sheet: {
+    width: "100%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+});

package/src/create-interpolation.ts

@@ -0,0 +1,27 @@
+/**
+ * Easing gradient utilities for React Native
+ *
+ * Original source: https://github.com/phamfoo/react-native-easing-gradient
+ * Author: @phamfoo
+ * License: MIT
+ */
+
+import { Animated } from "react-native";
+// @ts-expect-error
+const AnimatedInterpolation = Animated.Interpolation;
+
+type ColorInterpolateFunction = (input: number) => string;
+
+function createInterpolation(config: Animated.InterpolationConfigType): ColorInterpolateFunction {
+  if (AnimatedInterpolation.__createInterpolation) {
+    return AnimatedInterpolation.__createInterpolation(config);
+  }
+
+  return (input) => {
+    const interpolation = new AnimatedInterpolation({ __getValue: () => input }, config);
+
+    return interpolation.__getValue();
+  };
+}
+
+export { createInterpolation };

package/src/ease-gradient.ts

@@ -0,0 +1,87 @@
+/**
+ * Easing gradient utilities for React Native
+ *
+ * Original source: https://github.com/phamfoo/react-native-easing-gradient
+ * Author: @phamfoo
+ * License: MIT
+ */
+
+import { Easing, type EasingFunction } from "react-native";
+
+import { createInterpolation } from "./create-interpolation";
+
+interface ColorStops {
+  [location: number]: {
+    color: string;
+    easing?: EasingFunction;
+  };
+}
+
+interface GradientParams {
+  colorStops: ColorStops;
+  extraColorStopsPerTransition?: number;
+  easing?: EasingFunction;
+}
+
+const easeInOut = Easing.bezier(0.42, 0, 0.58, 1);
+
+function easeGradient({
+  colorStops,
+  easing = easeInOut,
+  extraColorStopsPerTransition = 12,
+}: GradientParams): {
+  colors: [string, string, ...string[]];
+  locations: [number, number, ...number[]];
+} {
+  const colors: string[] = [];
+  const locations: number[] = [];
+
+  const initialLocations = Object.keys(colorStops)
+    .map((key) => Number(key))
+    .sort();
+
+  const totalColorStops = initialLocations.length;
+
+  for (let currentStopIndex = 0; currentStopIndex < totalColorStops - 1; currentStopIndex++) {
+    const startLocation = initialLocations[currentStopIndex];
+    const endLocation = initialLocations[currentStopIndex + 1];
+
+    if (startLocation === undefined || endLocation === undefined) {
+      continue;
+    }
+
+    const startStop = colorStops[startLocation];
+    const endStop = colorStops[endLocation];
+
+    if (!startStop || !endStop) {
+      continue;
+    }
+
+    const startColor = startStop.color;
+    const endColor = endStop.color;
+    const currentEasing = startStop.easing ?? easing;
+
+    const colorScale = createInterpolation({
+      inputRange: [0, 1],
+      outputRange: [startColor, endColor],
+      easing: currentEasing,
+    });
+
+    const currentTransitionLength = endLocation - startLocation;
+    const stepSize = 1 / (extraColorStopsPerTransition + 1);
+
+    for (let stepIndex = 0; stepIndex <= extraColorStopsPerTransition + 1; stepIndex++) {
+      const progress = stepIndex * stepSize;
+      const color = colorScale(progress);
+      colors.push(color);
+      locations.push(startLocation + currentTransitionLength * progress);
+    }
+  }
+
+  return {
+    colors: colors as [string, string, ...string[]],
+    locations: locations as [number, number, ...number[]],
+  };
+}
+
+export { easeGradient };

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./components/year-date-picker";
+export { getMonthName } from "./utils";

package/src/utils.ts

@@ -0,0 +1,34 @@
+export function getMonthName(month: number, short = false): string {
+  const MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const MONTH_SHORT_NAMES = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  const names = short ? MONTH_SHORT_NAMES : MONTH_NAMES;
+  return names[month - 1] ?? "";
+}