@dgreasi/react-native-time-slot-picker NPM

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.

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']`