Error: Arrow bị trùng xuống

src/screens/class_schedule/modal_bottom_sheet.js

+import React from 'react';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Animated,
+  ScrollView
+} from 'react-native';
+import {styles} from './style';
+
+const ModalBottomSheetView = props => {
+  const {
+    selectedDate,
+    showBottomSheet,
+    bottomSheetTranslateY,
+    panResponder,
+    parseLocalDate,
+    formatDateToDisplay,
+    handleCloseBottomSheet,
+    getSelectedEvents,
+  } = props;
+  const renderBottomSheetContent = () => {
+    if (!selectedDate || typeof selectedDate !== 'string') return null;
+
+    const selectedDateObj = parseLocalDate(selectedDate);
+    const selectedEvents = getSelectedEvents();
+
+    return (
+      <View style={styles.bottomSheetContent}>
+        <View style={styles.dragHandle} />
+
+        <View style={styles.bottomSheetHeader}>
+          <Text style={styles.bottomSheetTitle}>
+            {formatDateToDisplay(selectedDateObj)}
+          </Text>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={handleCloseBottomSheet}>
+            <Text style={styles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView
+          style={styles.eventsScrollView}
+          showsVerticalScrollIndicator={false}>
+          {selectedEvents.length === 0 ? (
+            <View style={styles.noEventsContainer}>
+              <Text style={styles.noEventsText}>Không có sự kiện nào</Text>
+            </View>
+          ) : (
+            selectedEvents.map((event, index) => (
+              <TouchableOpacity
+                key={event.id}
+                style={styles.eventCard}
+                onPress={() =>
+                  navigation.navigate(SCREENNAME.DETAILCLASSSCHEDULE, {event})
+                }
+                activeOpacity={0.7}>
+                <View style={styles.eventTimeContainer}>
+                  <Text style={styles.eventTime}>
+                    {event.time}
+                    {event.endTime && ` - ${event.endTime}`}
+                  </Text>
+                </View>
+
+                <View style={styles.eventContent}>
+                  <Text style={styles.eventTitle} numberOfLines={2}>
+                    {event.title}
+                  </Text>
+                  {event.description && (
+                    <Text style={styles.eventDescription} numberOfLines={3}>
+                      {event.description}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            ))
+          )}
+        </ScrollView>
+      </View>
+    );
+  };
+  return (
+    <Modal
+      visible={showBottomSheet}
+      transparent={true}
+      animationType="none"
+      onRequestClose={handleCloseBottomSheet}>
+      <TouchableOpacity
+        style={styles.modalBackdrop}
+        activeOpacity={1}
+        onPress={handleCloseBottomSheet}>
+        <Animated.View
+          style={[
+            styles.bottomSheet,
+            {
+              transform: [{translateY: bottomSheetTranslateY}],
+            },
+          ]}
+          {...panResponder.panHandlers}>
+          <TouchableOpacity activeOpacity={1}>
+            {renderBottomSheetContent()}
+          </TouchableOpacity>
+        </Animated.View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+export default ModalBottomSheetView;

src/screens/class_schedule/style.js

@@ -11,15 +11,19 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: R.colors.white,
+  },
+  body:{
+    flex: 1,
+    width: '100%',
     alignItems: 'center',
   },
 
   // Header tháng/năm với nút điều hướng
   header: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
     paddingVertical: 15,
+    marginHorizontal:15
   },
   header_title: {
     fontSize: R.fontsize.fontsSize16,
@@ -31,21 +35,23 @@ const styles = StyleSheet.create({
   navButton: {
     width: 30,
     height: 30,
-    borderRadius: 20,
+    borderRadius: 50,
     backgroundColor: R.colors.blue500,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   navButtonText: {
     color: R.colors.white,
-    fontSize: R.fontsize.fontsSize12,
+    fontSize: R.fontsize.fontsSize20,
     fontFamily: R.fonts.InterMedium,
-    height: '100%',
+
   },
 
   // Tiêu đề các ngày trong tuần
   weekDaysContainer: {
     flexDirection: 'row',
-    paddingBottom: 5,
+    alignSelf:'center',
+    paddingBottom: 3,
     marginBottom: 5,
   },
   weekDayCell: {
@@ -60,7 +66,9 @@ const styles = StyleSheet.create({
   },
 
   // Lưới lịch
-  calendarGrid: {},
+  calendarGrid: {
+    alignSelf:'center'
+  },
   weekRow: {
     flexDirection: 'row',
   },

src/screens/class_schedule/view.js

@@ -10,13 +10,12 @@ import {
   LogBox,
 } from 'react-native';
 import R from '../../assets/R';
-import { styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT } from './style';
-import { useNavigation } from '@react-navigation/native';
+import {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT} from './style';
+import {useNavigation} from '@react-navigation/native';
 import * as SCREENNAME from '../../routers/ScreenNames';
-import { monthNames , weekDays, formatDateToString} from '../../config/Functions';
-LogBox.ignoreAllLogs(
-  true
-);
+import {monthNames, weekDays, formatDateToString} from '../../config/Functions';
+import ModalBottomSheetView from './modal_bottom_sheet';
+LogBox.ignoreAllLogs(true);
 const ClassScheduleView = ({
   currentDate,
   selectedDate,
@@ -35,7 +34,6 @@ const ClassScheduleView = ({
   handleCloseBottomSheet,
   getSelectedEvents,
 }) => {
-  const navigation = useNavigation();
   const renderHeader = () => {
     return (
       <View style={styles.header}>
@@ -86,7 +84,6 @@ const ClassScheduleView = ({
         ]}
         onPress={() => handleDatePress(date)}
         activeOpacity={0.7}>
-
         <Text
           style={[
             styles.dayText,
@@ -102,10 +99,7 @@ const ClassScheduleView = ({
             {dayEvents.slice(0, 2).map((event, eventIndex) => (
               <TouchableOpacity
                 key={event.id}
-                style={[
-                  styles.eventBar,
-                  { backgroundColor: R.colors.main },
-                ]}
+                style={[styles.eventBar, {backgroundColor: R.colors.main}]}
                 onPress={() => handleEventPress(event)}>
                 <Text style={styles.eventBarText} numberOfLines={1}>
                   {event.title}
@@ -121,128 +115,44 @@ const ClassScheduleView = ({
     );
   };
 
-
-
-
   const renderCalendarGrid = () => {
     const weeks = [];
     for (let i = 0; i < 6; i++) {
       const week = getMonthData.days.slice(i * 7, (i + 1) * 7);
       weeks.push(
         <View key={i} style={styles.weekRow}>
-          {week.map((date, dayIndex) =>
-            renderDayCell(date, i * 7 + dayIndex),
-          )}
+          {week.map((date, dayIndex) => renderDayCell(date, i * 7 + dayIndex))}
         </View>,
       );
     }
     return <View style={styles.calendarGrid}>{weeks}</View>;
   };
 
-  const renderBottomSheetContent = () => {
-    if (!selectedDate || typeof selectedDate !== 'string') return null;
-
-    const selectedDateObj = parseLocalDate(selectedDate);
-    const selectedEvents = getSelectedEvents();
-
-    return (
-      <View style={styles.bottomSheetContent}>
-        <View style={styles.dragHandle} />
-
-        <View style={styles.bottomSheetHeader}>
-          <Text style={styles.bottomSheetTitle}>
-            {formatDateToDisplay(selectedDateObj)}
-          </Text>
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={handleCloseBottomSheet}>
-            <Text style={styles.closeButtonText}>✕</Text>
-          </TouchableOpacity>
-        </View>
-
-        <ScrollView
-          style={styles.eventsScrollView}
-          showsVerticalScrollIndicator={false}>
-          {selectedEvents.length === 0 ? (
-            <View style={styles.noEventsContainer}>
-              <Text style={styles.noEventsText}>Không có sự kiện nào</Text>
-            </View>
-          ) : (
-            selectedEvents.map((event, index) => (
-              <TouchableOpacity
-                key={event.id}
-                style={styles.eventCard}
-                onPress={() => navigation.navigate(SCREENNAME.DETAILCLASSSCHEDULE, { event })}
-                activeOpacity={0.7}>
-
-                <View style={styles.eventTimeContainer}>
-                  <Text style={styles.eventTime}>
-                    {event.time}
-                    {event.endTime && ` - ${event.endTime}`}
-                  </Text>
-                </View>
-
-                <View style={styles.eventContent}>
-                  <Text style={styles.eventTitle} numberOfLines={2}>
-                    {event.title}
-                  </Text>
-                  {event.description && (
-                    <Text style={styles.eventDescription} numberOfLines={3}>
-                      {event.description}
-                    </Text>
-                  )}
-                </View>
-              </TouchableOpacity>
-            ))
-          )}
-        </ScrollView>
-      </View>
-    );
-  };
-
-  const renderBottomSheet = () => {
-    return (
-      <Modal
-        visible={showBottomSheet}
-        transparent={true}
-        animationType="none"
-        onRequestClose={handleCloseBottomSheet}>
-
-        <TouchableOpacity
-          style={styles.modalBackdrop}
-          activeOpacity={1}
-          onPress={handleCloseBottomSheet}>
-
-          <Animated.View
-            style={[
-              styles.bottomSheet,
-              {
-                transform: [{ translateY: bottomSheetTranslateY }],
-              },
-            ]}
-            {...panResponder.panHandlers}>
-            <TouchableOpacity activeOpacity={1}>
-              {renderBottomSheetContent()}
-            </TouchableOpacity>
-          </Animated.View>
-        </TouchableOpacity>
-      </Modal>
-    );
-  };
-
   return (
-    
     <SafeAreaView style={styles.container}>
       <ScrollView showsVerticalScrollIndicator={false}>
-        {renderHeader()}
-        {renderWeekDays()}
-        {renderCalendarGrid()}
+        <View>
+          {renderHeader()}
+          {renderWeekDays()}
+          <View style ={styles.calendarGrid}>
+            {renderCalendarGrid()}
+          </View>
+          
+        </View>
       </ScrollView>
-      {renderBottomSheet()}
+
+      <ModalBottomSheetView
+        selectedDate={selectedDate}
+        showBottomSheet={showBottomSheet}
+        bottomSheetTranslateY={bottomSheetTranslateY}
+        panResponder={panResponder}
+        parseLocalDate={parseLocalDate}
+        formatDateToDisplay={formatDateToDisplay}
+        handleCloseBottomSheet={handleCloseBottomSheet}
+        getSelectedEvents={getSelectedEvents}
+      />
     </SafeAreaView>
   );
 };
 
-
-
-export default ClassScheduleView;
\ No newline at end of file
+export default ClassScheduleView;