🎯 Try component at snack.expo.io
React Native customizable date picker component for iOS and Android. Designed using ScrollView. Looks identical on all
devices.
💻 Example
💬 Installation
-
Add dependencies to the project
yarn add @dietime/react-native-date-picker
npm install @dietime/react-native-date-picker --save
-
Install additional dependencies
yarn add expo-linear-gradient
npm install expo-linear-gradient --save
-
Then, import with ...
import DatePicker from '@dietime/react-native-date-picker';
-
If you are not using Expo
You should also follow these additional installation instructions.
👩💻 Usage
- Simple code example
import React, {useState} from "react";
import {Text, View} from "react-native";
import DatePicker from "@dietime/react-native-date-picker";
export default function App() {
const [date, setDate] = useState();
return (
<View>
<Text>{date ? date.toDateString() : "Select date..."}</Text>
<DatePicker
value={date}
onChange={(value) => setDate(value)}
format="yyyy-mm-dd"
/>
</View>
);
}
📚 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 . 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.
📃 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