How do I change the first day of the week to Monday in react-native-calendario?

Use the firstDayMonday prop set to true in the Calendar component. This configures the calendar to display Monday as the first day of the week instead of Sunday, as shown in the API table.

Does react-native-calendario support marking events with different colors?

Yes, use the markedDays prop for multi-dot markers on specific days. You can customize the appearance through the theme object, though detailed examples for color variations are not provided in the README.

How to disable past dates in react-native-calendario?

Set the minDate prop to a Date object, such as new Date(), to prevent selection of dates before today. Alternatively, use disabledDays for more granular control over specific dates.

Can I use react-native-calendario with Expo?

Yes, since it's a React Native library, it should work with Expo projects. However, ensure compatibility with your Expo version, as the README doesn't specify any Expo-specific setup or limitations.

react-native-calendario vs react-native-calendars: which is better for range selection?

React-native-calendario offers built-in range selection with min/max date boundaries and a clean API, while react-native-calendars may have more community support and additional features. Choose calendario for focused customization, but compare based on your app's specific needs like theming and performance.

How to customize the month title style in react-native-calendario?

Use the theme.monthTitleTextStyle property to override styles, such as color, fontWeight, and fontSize. Refer to the usage example in the README for a detailed implementation.

Open-Awesome

react-native-calendario

MITTypeScriptv3.5.0

A customizable calendar component for React Native with range selection, theming, and localization.

Visit Website GitHub

534 stars47 forks0 contributors

What is react-native-calendario?

React Native Calendar is a calendar component library for React Native applications that enables date selection, range picking, and calendar displays. It solves the need for a customizable and performant calendar UI in mobile apps with features like theming, localization, and marked days.

Target Audience

React Native developers building mobile applications that require calendar functionality, such as booking apps, event planners, or scheduling tools.

Value Proposition

Developers choose React Native Calendar for its extensive customization options, smooth performance with FlatList rendering, and built-in support for range selection and multiple languages without relying on external UI kits.

Overview

📆 React Native Calendar

Use Cases

Best For

Adding date range pickers to booking or reservation apps
Implementing customizable calendar views in event management applications
Building scheduling features with disabled date restrictions
Creating localized calendar interfaces for international apps
Developing mobile apps with themed calendar components matching brand designs
Displaying marked days (e.g., events, deadlines) in calendar layouts

Not Ideal For

Projects targeting web platforms or requiring cross-framework compatibility beyond React Native
Teams needing out-of-the-box, pre-styled calendar components without manual CSS theming work
Applications requiring advanced calendar logic like recurring events, time zone handling, or external calendar integrations

Pros & Cons

Pros

Flexible Range Selection

Supports configurable start and end dates with minDate and maxDate boundaries, making it ideal for booking or scheduling apps that require date range picking.

Extensive Customization Options

The theme prop allows detailed style overrides for all elements, including day containers, text, active states, and month titles, enabling full design control.

Built-in Localization

Includes out-of-the-box support for English, Spanish, French, and Brazilian Portuguese, with customizable dayNames and monthNames for further language adaptation.

Performance Optimizations

Uses FlatList for efficient month rendering with configurable initialListSize and numberOfMonths, ensuring smooth scrolling even with large date ranges.

Cons

Verbose Theming API

The theme object requires numerous style properties (e.g., monthTitleTextStyle, activeDayContainerStyle), making customization tedious and error-prone for quick setups.

Deprecated Prop Indicates Instability

The onChange callback is deprecated in favor of onPress, suggesting potential breaking changes and maintenance issues that could affect long-term projects.

Limited Out-of-the-Box Styling

Without custom themes, the calendar has a basic, unstyled appearance, requiring significant design effort to match polished app interfaces.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,857

Forks2,102

Last commit15 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,146

Forks1,801

Last commit2 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,953

Forks4,955

Last commit1 month ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,405

Forks3,612

Last commit5 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub