React Native Datepicker

React Native Datepicker is an easy-to-use component designed for creating date selection input fields in React Native applications. It provides a simple and customizable interface for users to pick a date from a calendar.

Installation

Use the following command to install the react-native-datepicker package using npm:

npm install react-native-datepicker --save

Usage

To use the Datepicker component in your React Native application, you need to import it into your code and render it with the required props.

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import DatePicker from 'react-native-datepicker';

const App = () => {
  const [date, setDate] = useState("");

  const handleDateChange = (date) => {
    setDate(date);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Select a date"
        value={date}
        editable={false}
      />
      <DatePicker
        date={date}
        mode="date"
        format="YYYY-MM-DD"
        onDateChange={(date) => handleDateChange(date)}
        showIcon={false}
        style={{width: '100%'}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 50,
    width: '80%',
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 20,
  },
});

export default App;

Props

The Datepicker component takes the following props:

• date: a string representing the currently selected date.
• mode: the date selection mode, can be one of date, time, or datetime.
• format: the date format, in YYYY-MM-DD or MM-DD-YYYY format.
• onDateChange: a function that will be called when the user selects a new date. The selected date will be passed as an argument to this function.
• minDate: the minimum date that can be selected.
• maxDate: the maximum date that can be selected.
• showIcon: boolean value that determines whether to show the calendar icon or not.
• customStyles: an object of styles to customize the appearance of the Datepicker component.

For more detailed documentation on the available props, please refer to the official documentation.

Customization

You can customize the appearance of the Datepicker component by passing a customStyles object as a prop. Here is an example of how to change the color of the header and the font size of the date text:

const customStyles = {
  dateText: {
    fontSize: 18,
  },
  dateTouchBody: {
    backgroundColor: '#fff',
  },
  datePicker: {
    backgroundColor: '#fff',
  },
  datePickerCon: {
    backgroundColor: '#fff',
  },
  btnTextCancel: {
    color: '#333',
  },
  btnTextConfirm: {
    color: '#333',
  },
  btnTextReset: {
    color: '#333',
  },
  datePickerCustomStyles: {
    header: {
      backgroundColor: '#555',
    },
  },
};

<DatePicker
  ...
  customStyles={customStyles}
/>

Conclusion

React Native Datepicker is a valuable component for users to select dates easily in React Native applications. It is easy to use and the customization options make it easy to integrate with any design. With its flexibility and versatility, it is a valuable addition to any React Native application.