react-native-time-slot-picker

Features

• No dependencies.
• A time slot picker for react native.
• Pass the availableDates you want to show.
• Pick a day and the timeslot you wish.
• Simple UX.
• Use colors of your preference by using the params.
• Use day shortnames and month names of your preference by using the params.
• Change the title of the timeslots section by using the params.
• Change the width of timeslot element by using the params.

Table of contents

• Changelog
• Screenshots
• Installation
• Usage
• Props
• Interfaces

Screenshots

You can test the library by opening the following snack here.

Run example locally

git clone https://github.com/dgreasi/react-native-time-slot-picker.git
cd react-native-time-slot-picker
npm i # or `yarn`
npm run example ios # or `yarn example ios`

Installation

npm i @dgreasi/react-native-time-slot-picker
# OR
yarn add @dgreasi/react-native-time-slot-picker

Usage

import * as React from 'react';
import { SafeAreaView, StatusBar } from 'react-native';
import {
  IAppointment,
  IAvailableDates,
  TimeSlotPicker,
} from '@dgreasi/react-native-time-slot-picker';
import { useEffect, useState } from 'react';

const availableDates: IAvailableDates[] = [
  {
    date: '2023-08-17T21:00:00.000Z', // new Date().toISOString()
    slotTimes: ['08:00-09:00', '09:00-10:00'], // Array<string> of time slots
  },
  {
    date: '2023-08-18T21:00:00.000Z',
    slotTimes: [], // No availability
  },
  {
    date: '2023-08-19T21:00:00.000Z',
    slotTimes: ['08:00-09:00', '09:00-10:00'],
  },
];

export default function App() {
  const [dateOfAppointment, setDateOfAppointment] =
    useState<IAppointment | null>(null);

  useEffect(() => {
    // Contains the selected date, time slot in the following format
    // {"appointmentDate": "2023-08-17T21:00:00.000Z", "appointmentTime": "18:00-19:00"}
    console.log('Date of appointment updated: ', dateOfAppointment);
  }, [dateOfAppointment]);

  return (
    <SafeAreaView>
      <StatusBar backgroundColor="transparent" barStyle="dark-content" />
      <TimeSlotPicker
        availableDates={availableDates}
        setDateOfAppointment={setDateOfAppointment}
      />
    </SafeAreaView>
  );
}

You can find a detailed example here.

Props

| Prop name | Description | Type | Default | | --------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | setDateOfAppointment | A component to use on top of header image. It can also be used without header image to render a custom component as header. | (data: IAppointment \| null) => void | REQUIRED | | availableDates | The array of the available slot times per date. | IAvailableDates[] | fixedAvailableDates | | scheduledAppointment | An already existed appointment, which is going to mark the specific date as with appointment. | IAppointment | undefined | | marginTop | Margin top for the whole component. | number | 0 | | datePickerBackgroundColor | Background color of the section with the horizontal scroll, which contains the days. | hex string | '#FFFFFF' | | timeSlotsBackgroundColor | Background color of the section that contains the time slots. | hex string | '#FFFFFF' | | timeSlotsTitle | Title of section that contains the | string | 'Select time' | | mainColor | Main color of the time slot picker | hex string | '#04060A' | | timeSlotWidth | Time slot pill width | number | 96 | | dayNamesOverride | Day string array to override letters for each Calendar day. First day is Sunday. | string[] | ['S', 'M', 'T', 'W', 'T', 'F', 'S'] | | monthNamesOverride | Month string array to override default month names that are used as title. | string[] | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |

Interfaces

| Name | Description | | ----------------- | ------------------------------------------------------ | | IAvailableDates | { date: string, slotTimes: string[] } | | IAppointment | { appointmentDate: string, appointmentTime: string } |

Roadmap

• Update scheduledAppointment arg to accept multiple appointments.
• Update logic of getAppointmentDay() to show dot in dates.
• Merge providers for performance improvement.

License

MIT