How do I get react-native-calendar-events working on Android platform React-Native 60+?

Question

I was struggling for a couple of weeks to get the react-native-calendar-events library working on my React Native project after it was upgraded from 0.53.3 to 0.60.4.

I was able to get it working on the iOS side via refactoring some code to execute authorizeEventStore before checking authorizationStatus like so:

export async function createCalendarEvent(event) {
  const store = await RNCalendarEvents.authorizeEventStore();
  console.log(store);
  if (store === "authorize") {
    addToCalendar(event);
  } else {
    RNCalendarEvents.authorizationStatus()
      .then(auth => {
        // handle status
        if (auth === "authorized") {
          addToCalendar(event);
        }
      })
      .catch(() => {
        alert("This app needs calendar access");
      });
  }
}

Unfortunately, this does not work on the Android side of the application. I have followed the Android setup guide here, even though it should not apply at this point with React-Native 60+ because of autolinking but I was running out of ideas:

https://github.com/wmcmahan/react-native-calendar-events/wiki/Android-setup

Sure enough, the above implementation did not work and there is no updated documentation. Not sure what I am missing, I have set this up on Android via autolinking, via the implementation above and still nothing.

I have been unsuccessful in getting any response from an open issue with the author of the lib: https://github.com/wmcmahan/react-native-calendar-events/issues/278

On the Android side when JavaScript executes this code:

export async function createCalendarEvent(event) {
  const store = await RNCalendarEvents.authorizeEventStore();
  console.log(store);
  if (store === "authorized") {
    addToCalendar(event);
  } else {
    RNCalendarEvents.authorizationStatus()
      .then(auth => {
        // handle status
        if (auth === "authorized") {
          addToCalendar(event);
        }
      })
      .catch(() => {
        alert("This app needs calendar access");
      });
  }
}

async function addToCalendar(event) {
  try {
    const startDate =
      Platform.OS === "ios"
        ? format(parse(event.StartDateLocal))
        : parse(event.StartDateLocal);
    const endDate =
      Platform.OS === "ios"
        ? format(parse(event.EndDateLocal))
        : parse(event.EndDateLocal);
    const allEvents = await RNCalendarEvents.fetchAllEvents(startDate, endDate);

    const calendarEvent = allEvents.find(e => e.title === event.Title);
    if (calendarEvent) {
      alert("You have already added this event to your calendar.");
    } else {
      const title = event.Title;

      const {
        Location: {
          AddressLine1: address,
          City: city,
          StateAbbreviation: state,
          PostalCode: zip
        }
      } = event;

      const location = `${address}, ${city}, ${state}, ${zip}`;

      const settings = {
        location,
        startDate,
        endDate
      };
      RNCalendarEvents.saveEvent(title, settings)
        .then(() => {
          alert("Event Saved");
        })
        .catch(rejectionReason => {
          console.log(rejectionReason);
          alert("Oops! Something has gone wrong.");
        });
    }
  } catch (e) {
    alert(e.message);
  }
}

it continues to print out alert("Oops! Something has gone wrong."); as opposed to the iOS side which prints out alert("Event Saved");

Answer 1

I was able to get it to work for Android with RN v0.61.4 by removing all of the manual hacks that the instructions say to do. With auto-linking, seems to work without all of those coding hacks to the gradle files and the *.java files. It also seems to work fine with iOS.