$ yarn add react-native-calendars

import React, { Component } from 'react';

import {

  StyleSheet,

  Text,

  View

} from 'react-native';

import CalendarPicker from 'react-native-calendar-picker';

​

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      selectedStartDate: null,

    };

    this.onDateChange = this.onDateChange.bind(this);

  }

​

  onDateChange(date) {

    this.setState({

      selectedStartDate: date,

    });

  }

  render() {

    const { selectedStartDate } = this.state;

    const startDate = selectedStartDate ? selectedStartDate.toString() : '';

    return (

      <View style={styles.container}>

        <CalendarPicker

          onDateChange={this.onDateChange}

        />

​

        <View>

          <Text>SELECTED DATE:{ startDate }</Text>

        </View>

      </View>

    );

  }

}

​

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#FFFFFF',

    marginTop: 100,

  },

});

//Prerequisits

/*

    1. expo install react-native-calendar-picker or yarn add react-native-calendar-picker

    2. yarn add moment //required

*/

​

//Example

​

import React, { Component } from 'react';

import {

  StyleSheet,

  Text,

  View

} from 'react-native';

import CalendarPicker from 'react-native-calendar-picker';

​

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      selectedStartDate: null,

    };

    this.onDateChange = this.onDateChange.bind(this);

  }

​

  onDateChange(date) {

    this.setState({

      selectedStartDate: date,

    });

  }

  render() {

    const { selectedStartDate } = this.state;

    const startDate = selectedStartDate ? selectedStartDate.toString() : '';

    return (

      <View style={styles.container}>

        <CalendarPicker

          onDateChange={this.onDateChange}

        />

​

        <View>

          <Text>SELECTED DATE:{ startDate }</Text>

        </View>

      </View>

    );

  }

}

​

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#FFFFFF',

    marginTop: 100,

  },

});

import {LocaleConfig} from 'react-native-calendars';

​

LocaleConfig.locales['fr'] = {

  monthNames: [

    'Janvier',

    'Février',

    'Mars',

    'Avril',

    'Mai',

    'Juin',

    'Juillet',

    'Août',

    'Septembre',

    'Octobre',

    'Novembre',

    'Décembre'

  ],

  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],

  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],

  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],

  today: "Aujourd'hui"

};

LocaleConfig.defaultLocale = 'fr';