5

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");

4
  • Did you find your problem? I also noticed on iOS everything is fine, on Android, it doesn't throw in my case, but the event still doesn't exist... Commented Dec 7, 2019 at 11:36
  • @MatthieuBrucher, if you have a solution I am all ears. While I appreciate the answer from djohnsonkc, my concern with this particular application is that there are a lot of unsupported third-party libraries and so upgrading it from 0.60.4 to 0.61.4 just to get this one feature working is courting trouble and asking to be set back several months which we can no longer afford. Commented Jan 4, 2020 at 20:04
  • Unfortunately no, no solution here. Of course, this makes me hate the Javascript ecosystem even more, nothing is stable there. It's such a mess compared to other languages! Commented Jan 4, 2020 at 20:35
  • 1
    @MatthieuBrucher, I hear that a lot. Part of it is because of concepts being implemented as an afterthought, that is after the language was already being widely used, such as the concept of classes. Now Reactjs, well, debugging callstacks with React or React Native is rather rare, because both of those libraries tend to obfuscate (or hide) the true callstack. In other words, both libraries add in so many additional function calls that it gets really challenging to figure out what is going on. Commented Jan 5, 2020 at 23:15

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.