Skip to content
Simple date range picker extended from react-native-calendars
Branch: master
Clone or download
Latest commit 596bca1 Mar 26, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots adjust size Mar 27, 2018
.gitignore Initial Commit Mar 27, 2018
DateRangePicker.js Initial Commit Mar 27, 2018 theme Mar 27, 2018


A simple Date Range Picker implemented with react-native-calendars.


Getting started

  1. Install react-native-calendars.
  2. Copy DateRangePicker.js to your project.


import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import DateRangePicker from './DateRangePicker';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          initialRange={['2018-04-01', '2018-04-10']}
          onSuccess={(s, e) => alert(s + '||' + e)}
          theme={{ markColor: 'red', markTextColor: 'white' }}/>

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


initialRange([fromDate, toDate])

An Initial range for component. The fromDate is used to set current month.

onSuccess(fromDate, toDate)

Function executed when a valid range is selected.


Extra theme properties.

  • markColor
  • markTextColor
You can’t perform that action at this time.