How can I select the year in react-native-calendars?

Issue

I am creating a calendar component and using react-native-calendars for it. The problem is that by default I cannot choose the year and I have to move between the months little by little.

import { theme } from "@/Common/theme"
import React, { useEffect, useState } from "react"
import { Modal, Text, TouchableOpacity, View } from "react-native"
import { Calendar as NativeCalendar } from "react-native-calendars"
import ModalSelector from "react-native-modal-selector"
import { useCalendar } from "./useCalendar"

export interface CalendarProps {
    visible: boolean
    onClose: () => void
    onChange: (value: string) => void
    value?: string
}

export const Calendar = (props: CalendarProps): JSX.Element => {
    const { visible, styles, onClose, markedDate, onMarkedDateChange, rest } =
        useCalendar(props)
    const [selectedYear, setSelectedYear] = useState("")
    const [currentYear, setCurrentYear] = useState(
        new Date().getFullYear().toString()
    )

    useEffect(() => {
        setCurrentYear(prevYear => {
            return prevYear
        })
    }, [currentYear])

    const renderYearSelector = () => {
        const years = Array.from({ length: 100 }, (_, index) => {
            const currentYear = new Date().getFullYear()
            return { label: `${currentYear - index}`, key: index.toString() }
        })

        return (
            <ModalSelector
                data={years}
                initValue="Seleccione el año"
                onChange={option => {
                    setSelectedYear(option.label)
                    setCurrentYear(option.label)
                }}
            />
        )
    }

    return (
        <Modal visible={visible} animationType="fade" transparent {...rest}>
            <View style={styles.viewCalendar}>
                <View style={styles.calendarContainer}>
                    <View style={styles.calendarHeader}>
                        <Text style={{ color: theme.colors.WHITE }}>
                            Seleccionar fecha
                        </Text>
                        <Text style={styles.selectDate}>
                            {markedDate && markedDate !== ""
                                ? new Date(markedDate).toLocaleDateString(
                                      "es-CO",
                                      {
                                          day: "2-digit",
                                          weekday: "short",
                                          month: "short",
                                      }
                                  )
                                : new Date().toLocaleDateString("es-CO", {
                                      day: "2-digit",
                                      weekday: "short",
                                      month: "short",
                                  })}
                        </Text>
                    </View>
                    {renderYearSelector()}
                    <NativeCalendar
                        theme={{
                            calendarBackground: "transparent",
                        }}
                        onDayPress={(date: { dateString: string }) =>
                            onMarkedDateChange(date.dateString)
                        }
                        markedDates={{
                            [markedDate]: {
                                selected: true,
                                color: theme.colors.SECONDARY,
                            },
                        }}
                        current={`${currentYear}-01-01`}
                    />
                    <View style={styles.buttonscontainer}>
                        <TouchableOpacity onPress={onClose}>
                            <Text style={styles.cancel}>CANCELAR</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={onClose}>
                            <Text style={styles.accept}>ACEPTAR</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

I tried to use a Modal Selector for it, but only the year is reflected when I deselect the calendar and open it again.

Solution

There are a few ways to select the year in react-native-calendars. One way is to use the onMonthChange prop. This prop takes a function that will be called when the month changes. In the function, you can get the current year using the getFullYear() method. Then, you can use the setYear() method to set the year to the desired value.

Another way to select the year is to use the onYearChange prop. This prop takes a function that will be called when the year changes. In the function, you can get the new year using the getFullYear() method. Then, you can use the setDate() method to set the date to the first day of the new year.

Finally, you can also select the year by using the year prop. This prop takes a number that represents the year. When you set this prop, the calendar will be displayed for the specified year.

Answered By - Shivo'ham