I need Week Navigation for Time Table in a School App - React Native

Question

Week Navigation location

I use mikezzb/react-native-timetable as a TimeTable library as his design suits as a Time Schedule than other "calendar library" and this one doesn't provide Week navigation functions.

I know it is a shame but if you know any library that has the similar design (School subject can spread out from startHour to endHour) and supports Week navigation like in ordinary calendars, please tell me, thank you. Or please help me create one: Btw, after this I need to call API for the data for each week.

The idea is: The buttons, navigations should be on the top of the Timetable, below the header of the Screen, as in picture (The white blank space with text description). The least thing I need is Previous and Next Button (Left & right respectively). For enhancement, I need a Combo Box in the middle of the 2 Buttons which will show the list of Current Semester Weeks.

Further details and information about the App:

Since we're creating something out of the current library I don't know how it would conflict/rely with the current library. I'm new to React Native too. Don't worry about classroom constraints or anything, this TimeTable show merely shows what the API provides. This is how my current Tab Navigations are (Notification, Schedule, Exam, Score): My Tab Navigation

In the Time Table, my data/properties are:

1. courseId.
2. title: "Data Structures"

3.1. sections: Practice or Theory Class. -> If a subject appear in many WeekDays, it will be describe here (see my Code below) 3.2. In the sections there are:

days: array of Days that the subject appears.

startTimes: array of starting time of the subject, respective to the days above.

endTimes: array of ending time of the subject, respective to the days above.

locations: array of the classes of the subject, respective to the days above.

Here is my Code in TimeScheduleScreen.js:

import { Alert, StyleSheet, View, Text } from "react-native";
import TimeTable from "@mikezzb/react-native-timetable";

const eventGroups = [
  {
    courseId: "CSCI2100",
    title: "Data Structures",
    sections: {
      Theory: {
        days: [1, 3],
        startTimes: ["13:30", "7:30"],
        endTimes: ["17:00", "11:40"],
        locations: ["Room A", "Room A"],
      },
      Practice: {
        days: [4],
        startTimes: ["13:30"],
        endTimes: ["17:00"],
        locations: ["Room C"],
      },
    },
  },
];

export default function TimeScheduleScreen() {
  return (
    <View style={styles.container}>
      <Text style={{ textAlign: "center" }}>
        WEEK NAVIGATION{"\n"}PREVIOUS NEXT
      </Text>
      <TimeTable
        eventGroups={eventGroups}
        configs={{
          numOfDays: 6,
          numOfDaysPerPage: 6,
          startHour: 6,
          endHour: 17,
        }}
        eventOnPress={(event) => Alert.alert(`${JSON.stringify(event)}`)}
        theme={{ primary: "#694fad" }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
  },
  container: {
    flex: 1,
  },
});