How to use useCalendar hook for React Native and Expo

5 min readSep 20, 2022

Recently working on a new app, I learned that using expo-calendar isn’t complicated but the Developer Experience (DX) can be improved with a hook. I created this hook for my app and then decided to share it with the Expo React Native community. Of course, expo-calendar offers devs a lot of functionalities. This hook pretends to offer utilities we use in a common calendar app. Is in progress, and maybe in the near future we add more utilities to this hook.

What utilities does this hook offer?

Get permission to access calendar
Directly open device settings to give permission to use calendar
Create a new calendar and store it on your device
Add events to the calendar
Get all calendar events
Get calendarId
Check if an event exists inside of the calendar created
Delete the calendar and all events inside of it

To do all this, we use the following libraries:

expo-calendar
expo-localization
@react-native-async-storage/async-storage

What do I get installing this hook?

This hooks allows you to generate an easy to create a new Calendar event from your app. You can also, ask for permissions, store the events generated on your device, add more events, remove it, personalize it by adding colors, and open device’s settings directly to ask for permission if the app user initially said no. We are not lazy devs, we only try to refactor and work happily!

Installation

In your Expo project, you’ll need to run the following commands to install it:

yarn add @atiladev/usecalendarnpx expo install expo-calendar expo-localization @react-native-async-storage/async-storage

How to use it

Import theuseCalendar hook in your app:

And then import the packages that you need to interact with the Calendar:

I created some functions to use with this example:

And now we’ll add two buttons to create the Calendar and remove it:

And that’s all!

We’ll check how looks at this

Pressing on Create Calendar Button will first ask the user permission if the app is being used for the first time:

After permission to use is allowed, we get our Calendar and first event.

Then, if you want to remove it, just press Remove Calendar Button and the calendar and all events included on it will be removed.

What happens if the user press DENY? Don’t worry. The useCalendar hook has a method to manage that. It is called openSettings(). This method will open a device’s settings and will ask the app user to give permission to access the Calendar manually.

And that’s all! Easy to use right?

Let’s build a little Expo App with this hook: “My Expo Agenda”!

Well, in your terminal enter:

Open your new project on your code editor and run it:

Now we are ready to start!

Now we are going to install the necessary libraries, on your terminal run:

yarn expo install expo-calendar expo-localization @react-native-async-storage/async-storage @atiladev/usecalendar react-native-calendar-picker react-native-modal moment

I will put focus on the main parts where we are using useCalendar hook. At the end of this post, I’ll give you a link to the My Expo Agenda repository.

First I want to organize my folder structure project like this:

There are many best configurations, but for this example I think is enough.

Now import useCalendar hook into App.tsx:

Inside of your functions, call our useCalendar hook, and destructuring all utilities you want to use, in this case, we need:

We ask for permission to Calendar access.

Then we try to create our calendar:

We check if already exist some calendarId created before.
If didn’t exist some calendarId, then we create a new one.
If the user selects a new day number (on the calendar picker), then the app allows him to create a new event on the Calendar (state.selectedDate)
We try to add this event to the Calendar.
We recover all existing previous events.
If the user doesn’t allow calendar access, then open settings to take to the user to settings and enable Calendar access to the App.
Function to remove actual calendar for this app.

And that’s all for useCalendar hook!

Check out some screenshots of the above functionality in action: