🎯 Try component at snack.expo.io

React Native customizable date picker component for iOS and Android. Designed using ScrollView. Looks identical on all devices. Support more month formats (January, Jan...)

💻 Example

💬 Installation

1. Add dependencies to the project

   1yarn add @hoadv/react-native-date-picker
   2
   3npm install @hoadv/react-native-date-picker --save

2. Install additional dependencies

   1yarn add expo-linear-gradient
   2
   3npm install expo-linear-gradient --save

3. Then, import with ...

   1import DatePicker from '@hoadv/react-native-date-picker';

4. If you are not using Expo

   You should also follow these additional installation instructions.

👩‍💻 Usage

• Simple code example

  1import React, {useState} from "react";
  2import {Text, View} from "react-native";
  3
  4import DatePicker from "@hoadv/react-native-date-picker";
  5
  6export default function App() {
  7    const [date, setDate] = useState();
  8
  9    return (
  10        <View>
  11            <Text>{date ? date.toDateString() : "Select date..."}</Text>
  12            <DatePicker
  13                value={date}
  14                onChange={(value) => setDate(value)}
  15                format="yyyy-MM-dd"
  16            />
  17        </View>
  18    );
  19}

📚 Documentation

Prop	Required	Type	Description
value	✅	Date or null or undefined	Initial date for component
onChange	✅	(value: Date) : void	Callback on date change event
height	⛔	number	Custom component height
width	⛔	number or string	Custom component width such as 100 or '50%'
fontSize	⛔	number	Custom digits font size
textColor	⛔	string	Custom digits text color such as hex, rgb or rgba
endYear	⛔	number	Max year in component, default is current year
startYear	⛔	number	Min year in component, default is endYear - 100
markColor	⛔	string	Custom middle mark color such as hex, rgb or rgba
markHeight	⛔	number	Custom height of middle mark
markWidth	⛔	number or string	Custom width of middle mark such as 100 or '50%'
fadeColor	⛔	string	Custom color for top and bottom fade effect only hex colors!
format	⛔	string	Custom picker format like reshuffle of yyyy, mm, dd, MM, M. Example: 'yyyy-mm-dd' or 'dd-mm-yyyy' and other

📂 Project Layout

• example Simple project with date picker. It is presented on gif.
• src Source code of date picker.
• lib Shared packages.
  • commonjs Package built as common js library.
  • module Package built as module.
  • typescript Built files for static typing.

📃 License

Source code is made available under the MIT license. Some dependencies may be licensed differently.

☕ Support

You can support me so that there will be more good open source projects in the future