react-native-date-picker

React Native customizable date picker component for iOS and Android. Designed using ScrollView.

? Example

react-native-date-pickerv

? Installation

  1. Add dependencies to the project

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

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

  2. Install additional dependencies

    yarn add expo-linear-gradient

npm install expo-linear-gradient --save

  3. Then, import with ...

    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
    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)}
            />
        </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)

GitHub