Implementing React Native DateTimePicker in a form for iOS/ Android

Introduction

These few past months have been a roller-coaster and in a good way. I am graduating from a Bootcamp in two days! The Grace Hopper Program offered by Fullstack Academy has been one of the most rewarding experiences of my life. I am amazed at what I was able to achieve within these last 17 weeks.

During our capstone project, my group decided on creating a mobile application for iOS and Android, that allows users to create an event and invite friends via SMS. The invited friends can vote on which restaurant they want the event to be held at. The restaurant with the highest amount of votes once the deadline is reached will be the chosen restaurant for the event.

A learning curve I experienced during my capstone project was how to implement react native’s DateTimePickeron a form and store the selected date or time in the firestore’s database. So in this article, I will be showing you how to do that!

Installing DateTimePicker

I initially had difficulty installing the RN DateTimePicker package. The error I received: ERESOLVE unable to resolve dependency tree . What finally worked was npm install @react-native-community/datetimepicker --legacy-peer-deps.

Long story short, DateTimePicker was not compatible with the version of react-native I was using. When we added --legacy-peer-deps , this rolls back the package’s dependencies version to the previous readable format that is compatible with my react-native version.

Getting Started

Use new Date() as the value of each property on the state where you want to implement the DateTimePicker. new Date() creates a platform-independent JavaScript Date instance that represents a single point in time.

onChange Functions

Create a onChange function to handle changes once a user selects a time or date. onChange takes two parameters: event and date. Since I’m using the DateTimePicker in four places in this form, I need to create four separate functions to handle each change. We also need an update function to set the state once the user selects a date or time.

Determining which mode to display (time or date)

Write functions to display a time or date picker based on the mode prop of the DateTimePicker. We will see this in the render/return section.

Storing the selected data from the DateTimePicker in Firestore

DataTimePicker Props

This section of the code is inside the return statement. I did not include all my code because I wanted to purely focus on the DateTimePicker and invoking the storeEvent function once an event form is submitted.

  • The mode prop defines the type of picker to display.
  • The display prop is only used for Android with the value set to default the display is based on the mobile device’s version (spinner/calendar/clock).
  • The is24Hour is also only for Android, which allows the user to change the display of the clock to a 24 format.
  • The only prop requires is value which defines the date or time used in the component.

Invoking the storeEvent function once a button is pressed

The newly created event is now stored in Firestore’s database

And there we have it! My first medium article. I hope this clarifies how to implement React-Native DateTimePicker along with storing the data in Firestore’s database. In my next article, I will discuss how to render the selectedDateTimePickerdata from the form into a readable format instead of a UNIX timestamp.

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store