in month view, multiple days event touch not firing on Android Phone

[relay955]

In React Native, a TouchableOpacity with absolute positioning does not seem to firing 'touch event' properly when it overflow from parent View.

For example, if register a schedule from the 2nd day to the 4th day, touching the 2nd day will work, but the 3rd and 4th will not.

This issue only occurs on real Android phones, not in the simulator or on the web.

here is my solution, this remove position:absolute and change rendering mechanism.

but I did not submit a pull request due to issues with calculating size when there is no content and need more testing.

CalendarEventForMonthView.tsx

import dayjs from 'dayjs'
import * as React from 'react'
import {
  AccessibilityProps,
  RecursiveArray,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from "react-native";

import { u } from '../commonStyles'
import { useCalendarTouchableOpacityProps } from '../hooks/useCalendarTouchableOpacityProps'
import { EventCellStyle, EventRenderer, ICalendarEventBase } from '../interfaces'
import { useTheme } from '../theme/ThemeContext'
import { getEventSpanningInfo } from '../utils/datetime'
import { typedMemo } from '../utils/react'
import styles from "react-native-webview/lib/WebView.styles";

interface CalendarEventProps<T extends ICalendarEventBase> {
  event: T
  onPressEvent?: (event: T) => void
  eventCellStyle?: EventCellStyle<T>
  eventCellAccessibilityProps?: AccessibilityProps
  renderEvent?: EventRenderer<T>
  date: dayjs.Dayjs
  dayOfTheWeek: number
  calendarWidth: number
  isRTL: boolean
  eventMinHeightForMonthView: number
  showAdjacentMonths: boolean
}

function _CalendarEventForMonthView<T extends ICalendarEventBase>({
  event,
  onPressEvent,
  eventCellStyle,
  eventCellAccessibilityProps = {},
  renderEvent,
  date,
  dayOfTheWeek,
  calendarWidth,
  isRTL,
  eventMinHeightForMonthView,
  showAdjacentMonths,
}: CalendarEventProps<T>) {
  const theme = useTheme()

  const { eventWidth, isMultipleDays, isMultipleDaysStart, eventWeekDuration } = React.useMemo(
    () => getEventSpanningInfo(event, date, dayOfTheWeek, calendarWidth, showAdjacentMonths),
    [date, dayOfTheWeek, event, calendarWidth, showAdjacentMonths],
  )

  const touchableOpacityProps = useCalendarTouchableOpacityProps({
    event,
    eventCellStyle,
    eventCellAccessibilityProps,
    onPressEvent,
    injectedStyles: [
      { backgroundColor: theme.palette.primary.main },
      isMultipleDaysStart && eventWeekDuration > 1
        ? {
            width: eventWidth,
            zIndex: 10000,
          }
        : {},
      isRTL ? { right: 0 } : { left: 0 },
    ],
  })

  return (
    (!isMultipleDays && date.isSame(event.start, "day")) ||
    (isMultipleDays && isMultipleDaysStart) ? <TouchableOpacity
       {...touchableOpacityProps}
       style={[touchableOpacityProps.style,{ minHeight: eventMinHeightForMonthView }, u["mt-2"]]}
        onPress={() => !event.disabled && onPressEvent?.(event)}
      >
      {renderEvent ? (
        renderEvent(event, touchableOpacityProps)
        ) : (
          <Text
            style={[
              { color: theme.palette.primary.contrastText },
              theme.typography.xs,
              u["truncate"],
              isRTL && { textAlign: "right" },
            ]}
            numberOfLines={1}
          >
            {event.title}
          </Text>
        )}
      </TouchableOpacity>:
      <View style={[{padding:12,minHeight: eventMinHeightForMonthView}, u["mt-2"]]}/>
  )
}

export const CalendarEventForMonthView = typedMemo(_CalendarEventForMonthView)

[acro5piano]

Thanks, your information is helpful. I hope you or someone will create a pull request for this issue in the future.