@dietime/react-native-date-picker

🎯 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

1. Add dependencies to the project

``bash
yarn add @dietime/react-native-date-picker

npm install @dietime/react-native-date-picker --save
`

2. Install additional dependencies

`bash
yarn add expo-linear-gradient

npm install expo-linear-gradient --save
`

3. Then, import with ...

`js
import DatePicker from '@dietime/react-native-date-picker';
`

4. If you are not using Expo
> You should also follow these additional installation instructions.

👩‍💻 Usage

- Simple code example
`javascript
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 (

{date ? date.toDateString() : "Select date..."}
value={date}
onChange={(value) => setDate(value)}
format="yyyy-mm-dd"
/>

);
}
`

📚 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.
- 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