How do I render events for an agenda using react-native-calendars?

Question

I was trying to render some dummy data events for my agenda. The calendar view shows up, but the bottom is simply loading. I have the json file formatted correctly, but it won't render.

import { StyleSheet, SafeAreaView } from "react-native";
import React from "react";
import { Agenda } from "react-native-calendars";

import Header from "../components/Header";
import events from "../data/calendar/events.json";

const StudentAgenda = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Header isProfile={false} />

      <Agenda items={events} />
    </SafeAreaView>
  );
};

export default StudentAgenda;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#E8EAED",
  },
});

Answer 1

I had used this example in one of my project and working fine. Hope this helps. https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx