allow users to see what is available in the calendar

package.json

     "@react-navigation/drawer": "^6.5.1",
     "@react-navigation/native": "^6.0.14",
     "@react-navigation/native-stack": "^6.9.2",
+    "@types/react-native": "~0.70.6",
     "expo": "~47.0.7",
     "expo-dev-client": "~2.0.1",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-calendars": "^1.1292.0",
     "react-native-gesture-handler": "^2.8.0",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",

screens/calendar.js

-import * as React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';
 import Header from '../shared/header';
+import Calendar from 'react-native-calendars/src/calendar';
+import { Agenda, calendarTheme } from 'react-native-calendars';
 
-export default function Calendario({navigation}) {
-    return (
-        <View style={styles.container}>
-         <Text>Calendario Screen</Text>
+export default function Calendario({ navigation }) {
+    const [items, setItems] = useState({
+      '2022-12-06': [{name: 'matricula'}],
+      '2022-12-07': [{name: 'seguir metiendole mano al sprint 🥵'}],
+      '2022-12-08': [],
+    });
+  
+    function renderItem(item) {
+      return (
+        <View>
+            <Text style={[styles.item, {height: item.height}]}>{item.name}</Text>
         </View>
-    )
+      );
+    }
+  
+    return (
+      <Agenda
+        items={items}
+        renderItem={renderItem}
+      />
+    );
 }
 
 const styles = StyleSheet.create({
     container: {
         padding: 24
+    },
+    item: {
+      backgroundColor: 'white',
+      flex: 1,
+      padding: 15,
+      marginRight: 10,
+      marginTop: 32
     }
 });