npm package: @md_maroof_malik/react_native_time_picker
Description: A customizable time picker component for React Native with smooth scrolling and gradient overlays
Author: Mohd Maroof Malik
Latest version: 1.1.1

# ⏰ @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

```bash
npm install @md_maroof_malik/react_native_time_picker
```

### Peer Dependencies

Make sure you have these dependencies installed in your project:

```bash
npm install expo-linear-gradient
```

---

## 🚀 Usage

### Basic Usage

```tsx
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

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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:

```tsx
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](https://github.com/mdmaroof)

---

## 📞 Support

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