DatePicker example in react native

• Install react-native-datepicker using below command
• npm install react-native-datepicker --save
• Create Components folder under src folder
• Add DatePickerEXP.js file and add below Code

import React, { Component } from "react";

import { View, StyleSheet } from "react-native";

import DatePicker from "react-native-datepicker";

export default class DatePickerEXP extends Component {

  constructor(props) {

    super(props);

    this.state = { date: "15-05-2018" };

  }

  render() {

    return (

      <View style={styles.container}>

        <DatePicker

          style={{ width: 200 }}

          date={this.state.date} //initial date from state

          mode="date" //The enum of date, datetime and time

          placeholder="select date"

          format="DD-MM-YYYY"

          minDate="01-01-2016"

          maxDate="01-01-2019"

          confirmBtnText="Confirm"

          cancelBtnText="Cancel"

          customStyles={{

            dateIcon: {

              position: "absolute",

              left: 0,

              top: 4,

              marginLeft: 0

            },

            dateInput: {

              marginLeft: 36

            }

          }}

          onDateChange={date => {

            this.setState({ date: date });

          }}

        />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: "center",

    justifyContent: "center",

    marginTop: 50,

    padding: 16

  }

});

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import DatePickerEXP from './src/Component/DatePickerEXP'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <DatePickerEXP/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: