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