From 9cb5f8c059db5b2af30c8594da05f46d06c94949 Mon Sep 17 00:00:00 2001
From: S Gandhi <s.gandhi@glossgenius.com>
Date: Fri, 13 Feb 2026 12:13:30 -0500
Subject: [PATCH] Fix overlapping appointment cards press feedback

When tapping overlapping appointment cards, only the visible portion
was being darkened due to opacity being applied to the Pressable itself.
This created a confusing UX where the overlay effect didn't cover the
entire card.

Changes:
- Move press feedback from Pressable style to render prop pattern
- Add pressedOverlay style with dark overlay (rgba(0, 0, 0, 0.2))
- Overlay now correctly darkens the entire card regardless of overlap
- Maintains existing functionality for onPress and onLongPress events

This ensures consistent visual feedback across all appointment cards,
whether they overlap with other cards or not.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/EventItem.tsx              | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/packages/react-native-calendar-kit/src/components/EventItem.tsx b/packages/react-native-calendar-kit/src/components/EventItem.tsx
index 81d39f0..f23f0ce 100644
--- a/packages/react-native-calendar-kit/src/components/EventItem.tsx
+++ b/packages/react-native-calendar-kit/src/components/EventItem.tsx
@@ -286,37 +286,38 @@ const EventItem: FC<EventItemProps> = ({
         },
       ]}>
       <Pressable
-        style={(state) => [
-          StyleSheet.absoluteFill,
-          { opacity: state.pressed ? 0.6 : 1 },
-        ]}
+        style={StyleSheet.absoluteFill}
         disabled={!onPressEvent && !onLongPressEvent}
         onPress={onPressEvent ? _onPressEvent : undefined}
         onLongPress={onLongPressEvent ? _onLongPressEvent : undefined}>
-        <View
-          style={[
-            styles.contentContainer,
-            { backgroundColor: event.color },
-            theme.eventContainerStyle,
-            overlapBorderStyle,
-            { opacity },
-          ]}>
-          {renderEvent ? (
-            renderEvent(eventInput, {
-              width: eventWidthAnim,
-              height: eventHeight,
-            })
-          ) : (
-            <Text
-              style={[
-                styles.title,
-                theme.eventTitleStyle,
-                { color: event.titleColor },
-              ]}>
-              {event.title}
-            </Text>
-          )}
-        </View>
+        {({ pressed }) => (
+          <View
+            style={[
+              styles.contentContainer,
+              { backgroundColor: event.color },
+              theme.eventContainerStyle,
+              overlapBorderStyle,
+              { opacity },
+            ]}>
+            {renderEvent ? (
+              renderEvent(eventInput, {
+                width: eventWidthAnim,
+                height: eventHeight,
+              })
+            ) : (
+              <Text
+                style={[
+                  styles.title,
+                  theme.eventTitleStyle,
+                  { color: event.titleColor },
+                ]}>
+                {event.title}
+              </Text>
+            )}
+            {/* Dark overlay for pressed state - darkens card without transparency */}
+            {pressed && <View style={styles.pressedOverlay} />}
+          </View>
+        )}
       </Pressable>
     </View>
   );
@@ -343,4 +344,9 @@ const styles = StyleSheet.create({
     height: '100%',
     overflow: 'hidden',
   },
+  pressedOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    borderRadius: 2,
+  },
 });