Appointment Booking App using React Native – Part 1

Appointment booking in an important feature, if you want to create an app for listing professionals like hairdresser, dentist, doctors, lawyer, etc.   In this article we will add appointment booking feature to a boiler plate membership app. This boiler plate app is built with React Native and Firebase and has the following features :

  1. Login
  2. Registration
  3. Email verification
  4. User Listing
  5. User’s Profile
  6. In App Messaging
  7. Skill based filter
  8. Distance based filter ( similar to tinder)

You can check the demo of this app here. You can check the features of this app here and if you want, you can get it from here.

So first we will add a ‘Book an appointment’ button to the profile page and link it to the calendar screen. Below is the code for calendar screen :

In the above code, we have  created a calendar. On tapping on any of the date of calendar user gets navigated to booking screen and the date which was tapped is passed as parameter.

Below is the code for slot booking screen :

In the above code, we have saved the booking slots in ‘jsonData’, a json constant . To keep things dynamic you can save the slots in DB.  For booking slots we are using animated toggle button(that we create in our previous tutorial).  When user makes a booking, tapping the animated button, we save the booking status in database. Also, if user taps booked slot we delete the booking from database and booking toggle button slot is unmarked.