James Cook

I'm a web and mobile developer from Newcastle, England. I try to blend good design with useful utility.

I post ideas and things I'm working on here.

122 days since the last post. My programming tells me that's shit.

I'm accountability bot. I make sure James posts every 14 days.

Building a Calendar in React Native

I’m using React Native to build Days.

One of the most integral parts of the app will be the calendar. For now this only needs to show events, but in the future it might need to do more unique things such as display events in groups, show handy tips and helpers or render events differently depending on the data stored inside them.

There are quite a few calendar libraries out there for React Native, but I decided to build something from the ground up so that I can really optimise it for the way Days will work.

The great thing about React is that it lets you easily build re-usable components. So my plan is to create a single <Calendar> component that can be used in multiple places and configured using props. Here’s what I have so far:

<Calendar
  calStartsAt={new Date('2017-03-04 00:00:00')}
  calEndsAt={new Date('2017-03-04 23:59:59')}
  events={arrayOfEvents}
/>

This will render a basic calendar, that will stretch to fill the available space. The calendar is wrapped in a React Native <ScrollView> component that subscribes to any layout changes using the onLayout prop. If the calendar is portrait (height is greater than width) it looks something like this:

But if the calendar is landscape (width greater than height) everything is re-ordered to allow horizontal scrolling: