react-native-calendars: a pure JS calendar for React Native apps

What react-native-calendars solves, and for whom

React Native gives you views, text and touch handling. It does not give you a month grid. Building one means computing the weekday offset of the first day of the month, deciding how many weeks to render, handling month boundaries, and then deciding what a selected day looks like versus a marked day versus a disabled day. That is a few hundred lines before you have drawn anything. react-native-calendars exists to remove that work. The README describes it as "a declarative cross-platform React Native calendar component for iOS and Android", and lists date marking, custom rendering, swipe navigation, blocking certain dates and locale formatting as features. The audience is app developers who need a calendar inside an existing React Native application: booking flows, habit trackers, attendance screens, event lists. It is not a standalone calendar application and it does not manage events for you. It renders dates and reports presses.

The three components and how dates flow through them

The package exports Calendar, CalendarList and Agenda. Calendar is the single month view. CalendarList is the scrollable, semi-infinite version the README shows in its examples. Agenda pairs a calendar strip with a list of items for the selected day. All three are JavaScript, and the README states plainly that no native module linking is required, which matters because it means an Expo or CRNA project can use them without ejecting. The data flow is one-directional and controlled from your side. You pass markedDates, an object keyed by date string, and each value describes how that date should look. You pass onDayPress, a callback that receives the pressed day, and you store the result in your own state. The component does not own the selection. That is a deliberate split: it keeps the calendar stateless with respect to your data, but it also means every visual change to a marked date requires you to rebuild the markedDates object and re-render. Date arithmetic itself comes from the xdate dependency listed in package.json, and the README notes automatic date formatting for different locales.

Installing react-native-calendars with yarn and rendering the first calendar

The README gives one install command. Run it inside your React Native project directory. Because the package is pure JavaScript, there is no pod install step for the library itself and no Android linking step.

yarn add react-native-calendars

After that, import the component and render it. The README's shortest example passes only onDayPress, which logs the pressed day. In a real screen you would keep the selected date in state instead. The example below follows the structure the README uses for a basic calendar with default settings.

import React, {useState} from 'react';
import {Calendar} from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;

Press a day and the calendar highlights it, because the pressed date becomes the single key in markedDates. The README also shows passing current to set the visible month, and a theme object to restyle the grid. The theme keys are named in the README: backgroundColor, calendarBackground, textSectionTitleColor, selectedDayBackgroundColor, selectedDayTextColor, todayTextColor, dayTextColor and textDisabledColor. For anything past these examples the README redirects to the official documentation site at wix.github.io/react-native-calendars, and that redirect is worth taking seriously, because the README itself is thin.

Locale configuration is manual, and that is the first place teams stumble

Automatic locale formatting does not mean the library knows your language. You register locales yourself through LocaleConfig, then set LocaleConfig.defaultLocale. The README's French example shows the shape: monthNames, monthNamesShort, dayNames, dayNamesShort and a today string. Five arrays and a string per language. If you ship in more than one language you are responsible for every one of those lists, and a missing or misordered entry shows up as a wrong weekday label rather than an error. There is no validation that monthNames has twelve entries or that dayNames has seven. This is the kind of configuration that passes review in English and breaks in a language with different month abbreviations.

Where react-native-calendars is the wrong choice

The component renders dates and reports presses. It does not schedule. There is no timezone model, no recurrence rule handling, no conflict detection, no notion of an event with a duration. If your product needs "every second Tuesday" or "this meeting moved because of daylight saving", you are building that layer yourself on top of a grid. The Agenda component lists items you supply; it does not compute them. A second limitation is the selection model. Because selection lives in your state and markedDates is a plain object keyed by date string, a calendar showing thousands of marked days means a large object rebuilt on each change. The README does not document a virtualized marking strategy beyond the components themselves. Third, this is a React Native component. It will not render in a web app without a React Native web setup, and it is not a drop-in for a browser project. If you want a native OS date picker instead of a custom grid, this is not that either; it is a rendered calendar, not a platform dialog.

Alternatives and the actual difference in approach

react-native-big-calendar takes a different starting point: it is built around events with start and end times, laid out on a day or week schedule. Where react-native-calendars gives you a month grid and asks you to mark dates, react-native-big-calendar gives you a time axis and asks you to supply event objects. If your screen is "what is happening at 14:00", the second model fits better; if it is "which days have something on them", the first does. react-native-calendar-strip is narrower still: a horizontal strip of dates for picking a day, without a month grid or an agenda list. Between the three, the choice is about which view your screen actually is, not about which library is better. The wix package is the broadest of the three in surface area, which is also why its API is the largest to learn.

Maintenance, releases and what the MIT licence means here

The repository is not archived, and the last push was on 2026-04-23. The most recent release listed is 1.1314.0 from 2026-01-29, after 1.1313.0 in 2025-06-24 and 1.1312.1 in 2025-05-26. Note the gap between June 2025 and January 2026: releases are not on a fixed cadence. The version field inside package.json reads 1.22.0, which does not match the published release numbers, so do not treat that field as the version you are installing. Upgrade cost is mostly API surface. The package depends on xdate, lodash, memoize-one, prop-types, react-native-swipe-gestures, recyclerlistview and hoist-non-react-statics, so a major change in any of those can reach your app through this library. The licence is MIT, which permits commercial use and modification; the repository ships a LICENSE file at the top level. That is a factual note about the licence text, not legal advice, and if your organisation has licence review, run it through that.

Editorial conclusion

Adopt it when you need a declarative month grid, an Agenda list or a locale-aware calendar inside a React Native or Expo app and you are willing to read the documentation site rather than the README. It is the wrong tool if you need a native OS date picker, a full scheduling product with timezone and recurrence rules, or a calendar that keeps working without a React Native runtime. Before wiring it into a release, verify three things: that the version you install matches the API in the documentation site, that your locale definitions cover every string you render, and that your own markedDates object is built from the same date format the component expects.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. Releases
5. wix/react-native-calendars on GitHub