Multiple Overlay Widget Overlapping each other when tapping will be incorrect
longb1997 opened this issue · comments
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:
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>
);
})}
@sAleksovski hi, if you need any information from me, feel free for asking
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.
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
I just published 0.14.1
that should fix this issue.
Please try again.
The example was really useful to try the solution.