sAleksovski / react-native-android-widget

Build Android Widgets with React Native
https://sAleksovski.github.io/react-native-android-widget/
MIT License
546 stars 22 forks source link

Multiple Overlay Widget Overlapping each other when tapping will be incorrect #86

Closed longb1997 closed 1 month ago

longb1997 commented 2 months ago

Hi, in my case, if you have multiple OverlapWidget overlapping each other. When you press it will only press the first OverlapWidget. Look like this: 2dc1c20b_9258_4bfc_a163_7fa68d6113e3 (1)

Since Overlap 2 has a height inside the first Overlap, when I press overlap 2, it activates the first Overlap. Thanks for helping!

This is code I used

{hours.map((hour, index) => {
        let eventsThisHour = eventsGroupedByHour[hour] ?? [];
        return (
          <OverlapWidget style={{width:'match_parent', height:'match_parent'}}>
            {eventsThisHour.map((meeting, meetingIndex) => {
              const meetingTime = moment(meeting.time, 'X');
              let eventHeight = calculateEventHeight(meeting, hourHeight);
              let eventTopOffset = calculateEventTopOffset(meeting, hourHeight, index);
              let eventOffsetX = calculateEventOffsetX(widgetWidth, meetingIndex)
               return (
                 <FlexWidget
                   key={meeting.id}
                   clickAction="OPEN_MEETING"
                   clickActionData={{
                     uri: `${baseDeepLink}${meeting.id}`,
                   }}
                   style={{
                     height: eventHeight,
                     backgroundColor: '#FFF',
                     borderRadius: 4,
                     width: widgetWidth / 4,
                     marginTop: eventTopOffset,
                     marginLeft: eventOffsetX,
                     borderColor: '#1E88E5',
                     borderWidth: 1,
                   }}
                 >
                   <STextWidget
                     truncate="END"
                     maxLines={1}
                     text={meeting.name}
                     type={'bold'}
                     textStyle={{
                       fontSize: 8,
                       color: '#2F3139',
                       paddingHorizontal: 2
                     }}
                   />
                 </FlexWidget>
            )})}
          </OverlapWidget>
        );
      })}
longb1997 commented 1 month ago

@sAleksovski hi, if you need any information from me, feel free for asking

sAleksovski commented 1 month ago

I think I know what the problem is, but it would be useful if you could provide the whole widget for testing.

By whole widget I mean using TextWidget instead of STextWidget, all the data for the hours... Basically a function that I can copy/paste in the project and it just works.

longb1997 commented 1 month ago

Hi @sAleksovski , Sorry for providing a lack of information. I just created a mini-project to reproduce it. https://github.com/longb1997/widget-example

Thank you for your time, I really appreciate it

sAleksovski commented 1 month ago

I just published 0.14.1 that should fix this issue. Please try again.

The example was really useful to try the solution.