rn-date-range NPM Version NPM Downloads

Date picker component for react native. Forked and edited from react-native-day-picker


Getting Started

$ npm install rn-date-range --save

Important: When you build app in release mode, calendar works smooth without any lags.


import React, { Component } from 'react';
import {
} from 'react-native';

import Calendar from 'rn-date-range'; 

export default class RNCalendarDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Calendar />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 30

AppRegistry.registerComponent('RNCalendarDemo', () => RNCalendarDemo);


All properties are optional

  • onSelectionChange (func) — Function which will be executed on day click. First param is clicked day date, second one previous clicked day, third one selected range.

  • startDate (Date) — Date from which you can select dates. By default is new Date().

  • width (number) Calendars width, should be divided on 7 without remainder or may cause unpredictable behaviour.

  • selectFrom (Date) — First day in range that will be selected from start.

  • selectTo (Date) — Last day in range that will be selected from start.

  • monthsCount (number) — Count of dates from current months to the last.

  • startFromMonday (bool) — If true than months will started from monday.

  • monthsLocale (arrayOf(string)) — Strings for localization, which will be displayed in month header started from January.

  • weekDaysLocale (arrayOf(string)) — Strings for localization, which will be displayed in week day header, started from sunday.

  • isFutureDate (boolean) — True if you want to select a future date. By default is false.=======

  • rangeSelect (bool) — True if you want to select a range of dates. By default is true.


  • bodyBackColor (string) — Calendar background color.

  • bodyTextColor (string) — Calendar headers text color.

  • headerSepColor (string) — Calendar header separator color.

  • dayCommonBackColor (string) — Not selected day background color.

  • dayCommonTextColor (string) — Not Selected day text color.

  • dayDisabledBackColor (string) — Disabled day background color.

  • dayDisabledTextColor (string) — Disabled day text color.

  • daySelectedBackColor (string) — First and last day in range background color.

  • daySelectedTextColor (string) — First and last day in range text color.

  • dayInRangeBackColor (string) — In range day background color.

  • dayInRangeTextColor (string) — In range day text color.

  • monthTextColor (string) — Calendar month header text color.


Email melihmucuk@gmail.com for support.

Rn Date Range

date picker component for react native

Rn Date Range Info

⭐ Stars 16
🔗 Source Code github.com
🕒 Last Update 2 years ago
🕒 Created 4 years ago
🐞 Open Issues 2
➗ Star-Issue Ratio 8
😎 Author melihmucuk