OverlapWidget height be limited by parent height

[longb1997]

Hi there, i have using OverlapWidget to show a list of items, and each item is an OverlapWidget

I want do something like this:

But my OverlapWidget's height is limited by the parent height, so that means it will be clipped if its height is higher than the parent height.

{hours.map(hour => {
        return (
          <FlexWidget
            style={{
              width: 'match_parent',
              height: hourHeight, //fixed height in parent
            }}
          >
            <OverlapWidget
              key={event.id}
              style={{
                height: eventHeight, // if eventHeight > hourHeight, the component will be overflow and cut off a part 
                backgroundColor: '#FFF',
                borderRadius: 4,
                width: widgetWidth / 4,
                marginTop: eventTopOffset,
                marginLeft: 20,
                borderColor: '#1E88E5',
                borderWidth: 1,
              }}
            >
              <FlexWidget>
                <STextWidget
                  truncate="END"
                  maxLines={1}
                  text={(meeting.provider ? `[${meeting.provider}] ` : '') + meeting.name}
                  type={'bold'}
                  textStyle={{
                    fontSize: 12,
                    color: '#2F3139',
                  }}
                />
                <STextWidget
                  text={`${meetingTime.format('HH:mm')}-${meetingTime
                    .add(Number(meeting.duration) || 0, 'minutes')
                    .format('HH:mm')} ${meeting.location ? ` • ${meeting.location}` : ''}`}
                  textStyle={{
                    fontSize: 10,
                    color: '#616161',
                  }}
                />
              </FlexWidget>
            </OverlapWidget>
          </FlexWidget>
        );
      })}

[sAleksovski]

OverlapWidget cannot be bigger than the parent view.

I think you should be implementing this the other way around. The OverlapWidget is a container in which you can place items. See the docs https://saleksovski.github.io/react-native-android-widget/docs/primitives/overlap-widget

<OverlapWidget style={{ height: 'match_parent', width: 'match_parent' }}>
  {hours.map((hour, index) => (
    <FlexWidget
      style={{
        width: 'match_parent',
        height: hourHeight,
        marginTop: index * hourHeight,
        ...additionalStyles,
      }}
    />
  ))}

  {events.map((event, index) => (
    <FlexWidget
      style={{
        width: widgetWidth / 4,
        marginLeft: 20,
        marginTop: eventTopOffset,
        ...additionalStyles,
      }}
    >
      // event info
    </FlexWidget>
  ))}
</OverlapWidget>

or

<OverlapWidget style={{ height: 'match_parent', width: 'match_parent' }}>
  <FlexWidget style={{ ... }}>
    {hours.map((hour) => (
      <FlexWidget
        style={{
          width: 'match_parent',
          height: hourHeight,
          ...additionalStyles,
        }}
      />
    ))}
  </FlexWidget>

  {events.map((event, index) => (
    <FlexWidget
      style={{
        width: widgetWidth / 4,
        marginTop: eventTopOffset,
        ...additionalStyles,
      }}
    >
      // event info
    </FlexWidget>
  ))}
</OverlapWidget>