# react-native-calendario is a themed calendar with range selection for React Native

> react-native-calendario is a MIT licensed React Native calendar component that supports date ranges, disabled and marked days, custom day rendering and four locales, with a theme object that styles every part of the grid. It depends on moment and react-native-month and is built with bob.

**maggialejandro/react-native-calendario** — 📆 React Native Calendar

- Repository: https://github.com/maggialejandro/react-native-calendario
- Website: https://react-native-components.gitbook.io/calendar/
- Stars: 535 · Forks: 45
- Language: TypeScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/maggialejandro-react-native-calendario

## What the component does and who reaches for it

The package is a React Native Calendar, written in TypeScript, and its appeal is that it is a plain JavaScript grid rather than a wrapper around a native date picker. That distinction drives everything. Because it renders with React Native views, every cell is a themed container and a themed text node, so the appearance is entirely under your control through a theme object rather than through platform styling. The API table in the README is a good summary of the surface. It covers selection with startDate and endDate, bounds with minDate and maxDate, the range toggle with disableRange, the week start with firstDayMonday, disabled days with the disabledDays map, multi-dot markers with markedDays, custom cell content with renderDayContent, and rendering behaviour with showWeekdays, showMonthTitle, numberOfMonths and startingMonth. The locale prop accepts es, en, fr and br, defaulting to en, and you can override the names entirely with dayNames and monthNames arrays. The project is MIT licensed, the author is Alejandro Maggi, and the documentation lives at a GitBook site.

## Installing it into an existing app

Installation is one command with either package manager.

```bash
npm install react-native-calendario --save
```

Or with yarn.

```bash
yarn add react-native-calendario
```

The component is then imported from the package name.

```ts
import { Calendar } from 'react-native-calendario';
```

The package.json shows a normal react-native-builder-bob layout, with main pointing at lib/commonjs/index.js, the react-native and source fields pointing at src/index.tsx, the module field at lib/module/index.js and the types at lib/typescript/src/index.d.ts, and the published files limited to lib and src. Peer dependencies on react and react-native are both left as wildcards, so the component does not pin your React Native version, and the runtime dependencies are moment at 2.30.1 and react-native-month at 1.6.3. The moment dependency is worth flagging, because moment is in maintenance mode in the wider JavaScript ecosystem, so an application that has already committed to date-fns or Luxon will be adding a second date library to the bundle.

## The theme object is the real API

Styling is where this component differs from a stock date picker, and the README's usage example is mostly a theme object. The example passes onChange, minDate, startDate and endDate, and then a theme with entries for activeDayColor, monthTitleTextStyle, emptyMonthContainerStyle, emptyMonthTextStyle, weekColumnsContainerStyle, weekColumnStyle, weekColumnTextStyle, nonTouchableDayContainerStyle, nonTouchableDayTextStyle, startDateContainerStyle, endDateContainerStyle, dayContainerStyle, dayTextStyle, dayOutOfRangeContainerStyle, dayOutOfRangeTextStyle, todayContainerStyle, todayTextStyle, activeDayContainerStyle, activeDayTextStyle and nonTouchableLastMonthDayTextStyle. The pattern is consistent: for most states there is a container style and a text style, and the theme replaces the component's default appearance entirely. The one entry that does not follow the container-and-text pairing is activeDayColor, which takes a colour object. If you want the calendar to look native on both platforms, this is the part that takes work, since the same theme object applies to both and the README does not document a per-platform override.

## Selection behaviour, including the deprecated callback

The prop table records one important migration detail. onChange is marked deprecated, with the description Callback called when a day is pressed, while onPress is required and has the type (Date) => void. So the current contract is that a press is mandatory, and the range start and end are supplied through startDate and endDate rather than being reported by the callback. endDate carries the constraint requires startDate in the Required column, which makes sense given that a range has no end without a start. The optional minDate and maxDate bound what can be selected and both default to null. There is a disableRange prop that turns off range selection, defaulting to false, so a single-date calendar is a prop away. The component is controlled in the sense that the selected range arrives as props, which means your screen owns the state and the calendar renders what you give it.

## Rendering control: months, lists and the web caveat

Several props exist purely for layout and performance, and they matter on mobile. numberOfMonths sets how many months to render, defaulting to 12, and startingMonth sets the first month to render as a YYYY-MM-DD string, defaulting to the current month. monthHeight changes the month row height, defaulting to 370, which suggests the month grid is a fixed-height vertical list rather than a flexible one. initialListSize maps to the FlatList initialNumToRender and defaults to 2, so by default only two months are rendered initially and the rest as the user scrolls, with viewableItemsChanged and its handleViewableItemsChange callback available to observe that. renderAllMonths exists for the web case, where you want every month rendered at once rather than lazily. disableOffsetDays removes the offset days that pad the first and last weeks of a month. renderDayContent lets you draw your own day content, which is how you would add a dot, an icon or a badge to a specific date. markedDays gives multi-dot support on the day component, and disabledDays is a map that takes individual days out of play.

## Where react-native-calendario is the wrong choice

Three limits. The first is that it is not a native calendar. A user on iOS or Android who expects the platform's date picker, with its wheel or sheet presentation and its own accessibility behaviour, gets a grid instead, and you take on the work of making that grid feel right on each platform. The second is the moment dependency, already noted, and the more subtle part is that the README's own API does not expose dates as strings or numbers. onPress hands you a Date, and the props take Dates, so moment is used internally for the calendar's own arithmetic rather than being part of the public contract. That reduces the impact of the dependency but does not remove it from the bundle. The third is release cadence. The listed releases are v3.5.0 from 2024-03-08, v3.4.0 from 2023-10-05 and v3.3.0 from 2022-11-18, while the package.json in the repository declares version 3.5.2, and the last push to the repository was on 2026-10-20. So the code is being touched, but the published npm history and the repository version have drifted apart, which is the sort of gap that makes a pin decision awkward. The alternatives are the platform's own picker components, which give the native look and no dependency, or a date picker built on a maintained date library, which is more work but avoids moment. For an app that only needs to pick one date and does not care how it looks, the native picker is the smaller decision.

## Conclusion

Adopt react-native-calendario if you need a drop-in calendar in a React Native app and want to style it through a theme object rather than restyling a native picker. Skip it if you need a native calendar experience, since this is a JavaScript grid rather than a platform dialog, and skip it if your project has moved off moment. Before you upgrade, note that onChange is marked deprecated in favour of onPress, and check the npm version against the repository, since the package.json says 3.5.2 while the last published release listed is v3.5.0.

## FAQ

### How do I install react-native-calendario?

With `npm install react-native-calendario --save` or `yarn add react-native-calendario`, then import the Calendar component from 'react-native-calendario'. Its runtime dependencies are moment 2.30.1 and react-native-month 1.6.3, and it declares react and react-native as wildcard peer dependencies.

### How do I style react-native-calendario?

Through the theme prop, which is a StyleSheet-like object with container and text styles for each state, including monthTitleTextStyle, weekColumnStyle, dayTextStyle, todayTextStyle, activeDayContainerStyle, activeDayTextStyle and the out-of-range and non-touchable variants. The README's usage example shows a complete theme object.

### What is the difference between onChange and onPress in react-native-calendario?

The API table marks onChange as deprecated and onPress as required, with the type (Date) => void. The selected range is supplied through the startDate and endDate props, and endDate requires startDate.

### Which locales does react-native-calendario support?

The locale prop accepts es, en, fr and br, and defaults to en. You can also override the day and month names directly with the dayNames and monthNames arrays, both of which default to an empty array.

## Sources

- [License: MIT](https://github.com/maggialejandro/react-native-calendario/blob/master/LICENSE)
- [maggialejandro/react-native-calendario on GitHub](https://github.com/maggialejandro/react-native-calendario)
- [Project website](https://react-native-components.gitbook.io/calendar/)
- [README](https://github.com/maggialejandro/react-native-calendario/blob/master/README.md)
- [Releases](https://github.com/maggialejandro/react-native-calendario/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/maggialejandro-react-native-calendario