How to Create Calendar App in React Native ?

In this article, we will see how to add a Calendar in React Native App. Discover how to enhance your React Native application by integrating a calendar using the powerful react-native-calendars library. With React Native’s ability to facilitate cross-platform mobile app development using JavaScript. T

his article describes the process of seamlessly adding a calendar to your app.

Prerequisites:

• Introduction to React Native
• React Native Components
• Expo CLI
• Node.js and npm (Node Package Manager)

Steps to Setup and Run React Native Project

Step 1: Setup the Development Environment

Install Expo CLI globally by running this command in your terminal:

npm install -g expo-cli​

Step 2: Create React Native Application With Expo CLI

Create a new React Native project with Expo CLI using this command in your terminal:

expo init react-calendar

Step 3: ​Navigate to the project directory by using this command:

cd react-calendar

Project Structure

Step 4: Install Required Dependencies

`npm install react-native-calendars` 

Approach: We will use the react-native-calendars library, a popular choice for adding a customizable calendar component with features like day selection, date marking, and event display in React Native apps.

Example​: In this example add a calendar component using `react-native-calendars` library, allowing users to view and select dates with custom styling.

Step 5: Open the App.js file. And paste the code into the App.js

Javascript

import React from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-calendars';

const MyCalendar = () => {
    return (
        <View>
            <Calendar
                markedDates={{
                    '2023-06-25': { selected: true, marked: true },
                    '2023-06-24': { marked: true },
                    '2023-06-26': {
                        marked: true, dotColor: 'red',
                        activeOpacity: 0
                    },
                }}
                theme={{
                    backgroundColor: '#ffffff',
                    calendarBackground: '#ffffff',
                    textSectionTitleColor: '#b6c1cd',
                    selectedDayBackgroundColor: '#00adf5',
                    selectedDayTextColor: '#ffffff',
                    todayTextColor: '#00adf5',
                    dayTextColor: '#2d4150',
                    textDisabledColor: '#d9e1e8',
                    dotColor: '#00adf5',
                    selectedDotColor: '#ffffff',
                    arrowColor: '#00adf5',
                    monthTextColor: '#00adf5',
                    indicatorColor: 'blue',
                    textDayFontFamily: 'monospace',
                    textMonthFontFamily: 'monospace',
                    textDayHeaderFontFamily: 'monospace',
                    textDayFontSize: 16,
                    textMonthFontSize: 16,
                    textDayHeaderFontSize: 16
                }}
            />
        </View>
    );
};

export default function App() {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <MyCalendar />
        </View>
    );
}

Step 6: To run the react native application, open the Terminal and enter the command listed below. 

npx expo start

To run on Android:

npx react-native run-android

To run on Ios:

npx react-native run-ios

Output: