⏰ @md_maroof_malik/react_native_time_picker

A beautiful and customizable 12-hour scrollable time picker for React Native with AM/PM support.

Designed for mobile apps using Expo or React Native CLI. Includes smooth scrolling with gradient overlays and returns time in epoch minutes (0–1440).

Author: Mohd Maroof Malik

✨ Features

• Scrollable Hour and Minute pickers
• AM/PM toggle support
• Returns time in epoch minutes (e.g., 480 = 8:00 AM)
• Clean and minimal design
• Works with both Expo and Bare React Native
• Fully typed with TypeScript
• Smooth scrolling with gradient overlays
• NEW: Custom icons support for close and input buttons
• NEW: Individual component exports for advanced customization
• NEW: Enhanced color customization options

📦 Installation

npm install @md_maroof_malik/react_native_time_picker

Peer Dependencies

Make sure you have these dependencies installed in your project:

npm install expo-linear-gradient

🚀 Usage

Basic Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import CustomSelectTime from '@md_maroof_malik/react_native_time_picker';

const App = () => {
  const [selectedTime, setSelectedTime] = useState(480); // 8:00 AM

  const handleTimeChange = (epochMinutes: number) => {
    setSelectedTime(epochMinutes);
    console.log('Selected time:', epochMinutes);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomSelectTime
        selectedTime={selectedTime}
        onTimeChange={handleTimeChange}
      />
    </View>
  );
};

export default App;

Advanced Usage with Custom Icons

import React, { useState } from 'react';
import { View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import CustomSelectTime from '@md_maroof_malik/react_native_time_picker';

const App = () => {
  const [selectedTime, setSelectedTime] = useState(480);

  const handleTimeChange = (epochMinutes: number) => {
    setSelectedTime(epochMinutes);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomSelectTime
        selectedTime={selectedTime}
        onTimeChange={handleTimeChange}
        inputIcon={<Ionicons name="time-outline" size={24} color="#666" />}
        closeIcon={<Ionicons name="close-circle" size={24} color="#666" />}
      />
    </View>
  );
};

export default App;

Using Individual Components

For advanced customization, you can import and use individual components:

import React, { useState } from 'react';
import { View } from 'react-native';
import { ModalPicker, TimeItem } from '@md_maroof_malik/react_native_time_picker';

const CustomTimePicker = () => {
  const [open, setOpen] = useState(false);
  const [selectedHour, setSelectedHour] = useState(8);
  const [selectedMinute, setSelectedMinute] = useState(0);
  const [amPm, setAmPm] = useState('AM');

  return (
    <View>
      <ModalPicker 
        open={open} 
        setOpen={setOpen}
      />
      {/* Your custom trigger button */}
    </View>
  );
};

🎨 Customization

Color Configuration

You can customize the appearance of the time picker by passing color props:

import CustomSelectTime from '@md_maroof_malik/react_native_time_picker';

// Example with custom colors
<CustomSelectTime
  selectedTime={selectedTime}
  onTimeChange={handleTimeChange}
  borderColor={appColors.grey[200]}
  textColor={appColors.grey[900]}
  selectedBg={appColors.primary.orange[50]}
  selectedBorderColor={appColors.primary.orange[500]}
/>

Available Color Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | textColor | string | #212121 | Color of the time text | | borderColor | string | #E0E0E0 | Color of the picker border | | selectedBg | string | #FFF3E0 | Background color of selected items | | selectedBorderColor | string | #FB8C00 | Border color of selected items |

Custom Icons

You can customize the icons used in the time picker:

import { Ionicons } from '@expo/vector-icons';

<CustomSelectTime
  selectedTime={selectedTime}
  onTimeChange={handleTimeChange}
  inputIcon={<Ionicons name="time-outline" size={24} color="#666" />}
  closeIcon={<Ionicons name="close-circle" size={24} color="#666" />}
  //inputIcon={<Image source={require("../assets/*.png")} }
  //closeIcon={<Image source={{uri:"https://iamge--*.png"}}/>}
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | inputIcon | React.ReactNode | Clock icon | Icon displayed in the input field | | closeIcon | React.ReactNode | Close icon | Icon displayed in the modal header |

📖 API Reference

CustomSelectTime Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | selectedTime | number | 480 | Time in epoch minutes (0-1440) | | onTimeChange | (epochMinutes: number) => void | - | Callback when time changes | | textColor | string | #212121 | Color of the time text | | borderColor | string | #E0E0E0 | Color of the picker border | | selectedBg | string | #FFF3E0 | Background color of selected items | | selectedBorderColor | string | #FB8C00 | Border color of selected items | | closeIcon | React.ReactNode | Default close icon | Custom close icon for modal | | inputIcon | React.ReactNode | Default clock icon | Custom icon for input field |

Exported Components

The package exports the following components for advanced usage:

• CustomSelectTime (default export) - Complete time picker component
• ModalPicker - Modal picker component
• TimeItem - Individual time item component

Time Conversion

The component returns time in epoch minutes (0-1440). Here's how to convert:

const now = new Date();
const currentEpochMinutes = now.getHours() * 60 + now.getMinutes();
console.log(currentEpochMinutes); // e.g., 480 for 8:00 AM

// Convert epoch minutes to hours and minutes
const epochMinutes = 480
const hours = Math.floor(epochMinutes / 60);
const minutes = epochMinutes % 60;

// Convert to 12-hour format
const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
const amPm = hours >= 12 ? 'PM' : 'AM';

console.log(`${displayHours}:${minutes.toString().padStart(2, '0')} ${amPm}`);

🔄 Changelog

Version 1.1.0

• ✨ Added custom icons support (closeIcon and inputIcon props)
• 📦 Added individual component exports (ModalPicker, TimeItem)
• 🎨 Enhanced color customization options
• 📝 Improved TypeScript types and documentation

Version 1.1.0

• 🎉 Initial release with basic time picker functionality
• 🎨 Smooth scrolling with gradient overlays
• 📱 Support for both Expo and React Native CLI

📄 License

MIT © Mohd Maroof Malik

📞 Support

If you have any questions or need help, please open an issue on GitHub or contact the author.