Android View Clipping

[vietduc18020326]

I am using FlexWidget

The left image is what it is currently doing, and the right is what I'd like. Does anyone have any solution for this?

[sAleksovski]

Can you share a minimal widget that reproduces the left picture?

[vietduc18020326]

this is my widget

i am using FlexWidget to view this but i don't see any property that can clip the blue view like the right image in my question

[sAleksovski]

I meant the widget code that reproduces the image on the left.

[vietduc18020326]

@sAleksovski This is my code to view card inside widget

<FlexWidget
      style={{
        width: 'match_parent',
        height: 69,
        marginBottom: isLast ? 0 : 4,
        borderRadius: 16,
        backgroundColor: WidgetColor.light,
        flexDirection: 'row',
      }}>
      <FlexWidget
        style={{
          height: 'match_parent',
          flex: 1,
          paddingVertical: 8,
          paddingLeft: 8,
          paddingRight: 3,
          flexGap: 2,
        }}>
        <TextWidget
          text={
            booking?.name + (isLast ? 'chadcb chdavc vc havchd avca d' : '') ||
            'No name'
          }
          maxLines={2}
          truncate={'END'}
          style={{
            fontSize: 12,
            color: WidgetColor.neutral1,
            fontWeight: '500',
            fontStyle: 'normal',
            fontFamily: 'Inter-Medium',
          }}
        />
        <TextWidget
          text={stime + ' - ' + etime}
          style={{
            fontSize: 11,
            color: WidgetColor.neutral2,
            fontWeight: '400',
            fontStyle: 'normal',
            fontFamily: 'Inter-Regular',
          }}
        />
        <TextWidget
          text={resource?.name || 'No name'}
          maxLines={1}
          truncate={'END'}
          style={{
            fontSize: 11,
            color: WidgetColor.neutral2,
            fontWeight: '400',
            fontStyle: 'normal',
            fontFamily: 'Inter-Regular',
          }}
        />
      </FlexWidget>
      <FlexWidget
        style={{
          height: 'match_parent',
          width: 5,
          backgroundColor: '#267CDE',
        }}
      />
    </FlexWidget>

and i dont know how to clipping the blue view and this is the blue view code

<FlexWidget
        style={{
          height: 'match_parent',
          width: 5,
          backgroundColor: '#267CDE',
        }}
      />

[sAleksovski]

I just released 0.10.0 that solves this.

You can use the overflow: 'hidden' style prop that can clip the view using its radius. See also the docs