Animated Week Month Date Picker For React Native

A React Native component to help developers create an animated date picker with week and month views.

How to use it:

1. Install the date picker component and dependencies as follows:

$ npm i vue-modality-v3

# Dependencies
$ npm i react-native-reanimated react-native-gesture-handler react-native-safe-area-context date-fns

2. Import the component.

import { addDays } from 'date-fns';
import * as React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { DatePicker } from 'react-native-week-month-date-picker';

3. Create a date picker component in the app.

export default function App() {
  const minDate = new Date();
  const [selectedDate, setSelectedDate] = React.useState(new Date());
  return (
    <SafeAreaView style={{ flex: 1}}>
        maxDate={addDays(minDate, 120)}
        markedDates={[minDate, addDays(new Date(), 2)]}
        onDateChange={(date) => setSelectedDate(date)}
        disabledDates={[addDays(new Date(), 1), addDays(new Date(), 3)]}
          primaryColor: 'purple',

4. Available date picker component.

selectedDate: Date;
onDateChange: (date: Date) => void;
minDate?: Date;
maxDate?: Date;
markedDates?: Date[];
disabledDates?: Date[];
allowsPastDates?: boolean;
theme?: {
  primaryColor?: string;
translations?: {
  todayButtonText?: string;
locale?: string;


Animated Week Month Date Picker For React Native

Download Details:

Author: noona-hq

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment