How to Add Days in Date in React Native Calendar

Hey developers! Ever wondered how to manipulate dates in a React Native calendar? In this guide, we'll explore the step-by-step process of adding days to a date. Get ready to elevate your app's date-handling capabilities!

In this article, we'll learn about adding days to date in react native using moment js. In the moment js calendar, you can add a custom day to date in react native.

So, let's see how to create a custom calendar in react native, react native adds days to the calendar.

Here's a step-by-step guide on how to add days to a date in a React Native calendar:

Step 1: Set Up Your React Native Project

Ensure that you have a React Native project set up. You can use Expo or React Native CLI for this.

expo init MomentJSCalendar
cd MomentJSCalendar

Step 2: Install Moment.js

Install Moment.js using:

npm install moment

Step 3: Add a Date Manipulation Function in App.js

Add a function to manipulate the date by adding days.

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

export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.date}>{moment().add(1, 'days').calendar() }</Text>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text: {
    fontSize: 24,
  },

  date: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 15
  }

});

Step 4: Run Your Expo App

Run your Expo app using:

expo start

Conclusion:

And there you have it! Adding days to a date in your React Native calendar is a breeze. Now, you learn about how to add days to date in the moment js calendar in React JS.

Keep coding, and may your calendars always stay up-to-date and user-friendly!

You might also like:

Read Also: How to Create Moment JS Calendar in React Native