Skip to main content

​
Installation

Get started with React Native Calendars by installing the package in your React Native or Expo project.

​
Prerequisites

Before installing React Native Calendars, ensure you have:
  • React Native 0.60 or higher
  • Node.js 18 or higher
  • React 16.8 or higher (for hooks support)

​
Install the package

npm install react-native-calendars
React Native Calendars is implemented in pure JavaScript, so no native module linking is required.

​
Peer dependencies

The library has the following peer dependencies that should already be in your project:
  • react
  • react-native
The following dependencies are automatically installed:
  • xdate - Date manipulation library
  • hoist-non-react-statics - Utility for hoisting statics
  • lodash - Utility functions
  • memoize-one - Memoization utility
  • prop-types - Runtime type checking

​
Expo compatibility

React Native Calendars works seamlessly with Expo projects without requiring ejecting. Simply install the package and start using it.
npx expo install react-native-calendars

​
Verify installation

To verify that the installation was successful, try importing the Calendar component: 
import {Calendar} from 'react-native-calendars';
If the import succeeds without errors, you’re ready to start building with React Native Calendars!

​
TypeScript support

React Native Calendars includes built-in TypeScript definitions. No additional @types packages are needed.
The library exports TypeScript types for all components and props: 
import {Calendar, CalendarProps, DateData} from 'react-native-calendars';

const MyCalendar: React.FC = () => {
  const handleDayPress = (day: DateData) => {
    console.log('Selected:', day.dateString);
  };

  return <Calendar onDayPress={handleDayPress} />;
};

​
Optional dependencies

​
Moment.js

If you want to use Moment.js for date manipulation, you can optionally install it: 
npm install moment
Moment.js is listed as an optional dependency. The library works perfectly fine with the built-in XDate library.

​
Next steps

1

Explore quick start

Learn how to create your first calendar component in the quick start guide.
2

Browse examples

Check out the example app in the GitHub repository for advanced usage patterns.
3

Customize your calendar

Explore theming options and customization in the component documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us