react-native-fancy-date-picker

A 3D wheel-style date and time picker for React Native.

Install

npm install react-native-fancy-date-picker

Usage

import React, { useState } from "react";
import { View, Text } from "react-native";
import { FancyDatePicker } from "react-native-fancy-date-picker";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <View>
      <FancyDatePicker
        onDateChange={(date) => {
          setValue(
            `${date.month} ${date.day}, ${date.year} ${date.hour}:${date.minute} ${date.ampm}`,
          );
        }}
        showTime
        itemTextStyle={{ color: "#00ff00", fontSize: 20 }}
        containerStyle={{ backgroundColor: "#000" }}
      />
      <Text>{value}</Text>
    </View>
  );
}

Props

| Prop | Type | Required | Description | | ------------------------- | ---------------- | -------- | ---------------------------------- | | onDateChange | (date) => void | Yes | Callback when date/time changes | | initialDate | Date | No | Initial date to display | | showTime | boolean | No | Show time picker (default: true) | | containerStyle | ViewStyle | No | Style for main container | | pickerRowStyle | ViewStyle | No | Style for date picker row | | timePickerRowStyle | ViewStyle | No | Style for time picker row | | itemTextStyle | TextStyle | No | Style for text in scrollers | | timeSeparatorStyle | TextStyle | No | Style for ":" separator | | selectionHighlightStyle | ViewStyle | No | Style for selection highlight |

Peer dependencies

This package expects these to be installed in the app:

• react
• react-native
• react-native-reanimated
• react-native-gesture-handler
• react-native-reanimated-carousel
• expo-haptics (optional)

Build

npm run build