React Native Calendar

You can implement a calendar in React Native using the popular react-native-calendars library by Wix. It provides a simple and customizable calendar UI out of the box.

1. Install the library:

npm install react-native-calendars

2. Calendar Display

<Calendar
  onDayPress={day => {
    setSelectedDate(day.dateString);
  }}
  markedDates={{
    [selectedDate]: {
      selected: true,
      marked: true,
      selectedColor: 'blue',
    },
  }}
/>

Explanation:

• onDayPress: Callback that triggers when a date is tapped. day.dateString is a string like ‘2025-07-24’.
• markedDates: Object to highlight dates. We mark only the selectedDate:
  • selected: true highlights the date.
  • marked: true shows a small dot under the date.
  • selectedColor: ‘blue’ changes the highlight color.

3. Expo Example:

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

const MyCalendar = () => {
  const [selectedDate, setSelectedDate] = useState('');

  return (
    
       {
          setSelectedDate(day.dateString);
        }}
        markedDates={{
          [selectedDate]: {
            selected: true,
            marked: true,
            selectedColor: 'blue',
          },
        }}
      />
      {selectedDate ? (
        Selected Date: {selectedDate}
      ) : (
        No date selected
      )}
    
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    padding: 16,
  },
  dateText: {
    marginTop: 20,
    fontSize: 18,
    textAlign: 'center',
  },
});

export default MyCalendar;

Also Read:

React Native Hooks