Skip to content
Get packs

react-native-calendars

A calendar component for React Native apps on iOS and Android, written in JavaScript.

GitHub Download 1.1314.0
Stars
10.3k
Forks
3.1k
Licence
MIT
Language
TypeScript
Last update
20 days ago
Type
Library

What it is

React Native Calendars is a library that gives React Native app developers ready-made calendar components, including a single-month calendar, a scrollable calendar list, and an agenda view. Developers use it to show dates, mark days with dots or highlighted periods, and let users select dates. Per the README, it is pure JavaScript, so it needs no native module linking.

  • Show a month calendar in an app and react when a user taps a day
  • Highlight appointment days with colored dots or a range of selected dates
  • Display a scrollable list of months with an agenda of events beneath it
  • Apply a custom theme to match the colors of your app
  • Show calendar text in another language using the locale configuration

Great for

  • React Native developers who need a calendar or date picker screen
  • Apps that need to mark dates with dots, periods, or custom styling
  • Teams building scheduling or booking screens that block certain dates
  • Projects that use Expo, since the README says it works there without ejecting

Not ideal for

  • People who are not building a React Native app, since it is a component library for that framework
  • Developers who need a native-looking calendar built directly on platform APIs, since the README describes it as a JavaScript implementation
  • Projects that need the detailed API reference from the README alone, since the README points to an external documentation site for full details
Step-by-step guide: how to use react-native-calendarsInstall, first run, examples, tips and FAQs
react-native-calendars alternativesreact-native-calendars vs React Native ElementsNativeBase vs react-native-calendarsreact-native-calendars vs Tamagui

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · React Native project or Expo project · Yarn

    Install the package

    yarn add react-native-calendars
  2. 2

    Run it

    • Install the package with yarn add react-native-calendars.
    • Import Calendar from 'react-native-calendars' in your screen.
    • Render <Calendar onDayPress={day => console.log('selected day', day)} /> to see a working calendar.
    • Add markedDates to highlight specific days.
  3. 3

    Get the most out of it

    • Use markedDates to mark days with dots, periods, or custom styles, as shown in the README examples.
    • Use the theme prop to change colors across the calendar.
    • Configure LocaleConfig to display month and day names in other languages.
    • Read the official documentation site linked in the README for the full list of props.

Downloads

Source code (.zip)master branch · straight from GitHubRelease 1.1314.0Release notes and source

Strengths

  • The README says it is pure JavaScript with no native code, so installation is simple
  • Supports several marking styles and customization of style, content, and dates
  • Has documentation and examples, and the README links to an official docs site

Trade-offs

  • The README is a basic guide and sends detailed usage to an external documentation site
  • The README does not describe its performance or behavior on very old React Native versions
  • The README mentions an example module that links to a private-looking repository path, so the sample source may be harder to reach

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-native-calendars (this)10.3kLibrarybeginner20 days agoReact Native developers who need a calendar or date picker screen
react-native-elements25.9kLibraryintermediate6 months agoReact Native developers who want ready-made UI components
NativeBase20.4kLibraryintermediate9 months agoTeams maintaining an existing app already built on NativeBase
react-native127kFrameworkintermediate4 days agoWeb developers who already know React and want to build mobile apps
Detox12.1kLibraryintermediate4 days agoTeams building React Native apps for Android and iOS who want automated end-to-end tests
Valdi16.4kLibraryadvanced6 days agoMobile teams who want one UI codebase for iOS and Android

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.