Children with negative margins yield unexpected behavior

[Tatious]

Steps to Reproduce

Create a view with a child that has a negative margin:

<View style={{ paddingLeft: 100, paddingTop: 200 }}>
  <View style={{ width: 200, height: 40, backgroundColor: 'green', borderRadius: 4 }}>
    <View
      style={{
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        borderWidth: 2,
        borderRadius: 10,
        borderColor: 'white',
        margin: -6,
      }}
    />
  </View>
</View>

Expected Behavior

In this case, there is a border around the parent (iOS):

Actual Behavior

The child view does not show: (Windows):

Additional context

Adam Gorman(adamgor) Austin Beaulieu(aubeauli)

[chrisglein]

May be a clipping issue?

[CarpeDiEmma]

Is there any headway or information with this? I am also running into this issue.

[HansHugli]

Yes, this is a clipping issue caused by use of negative margins. We are still experiencing this problem and it does cause problems for several desired scenarios. Especially focus rects for buttons.

[updated] After one of our dev's did an investigation, the issue is actually caused by setting a border radius on the button, without a border radius, the focus rect shows, setting a border radius causes anything with a negative margin to clip, regardless of whether overflow is set to hidden or visible.

This is a workaround: <View style={{ justifyContent: "center", alignItems: "center", width: 200, height: 40, overflow: "visible", }} > <View style={{ borderWidth: 2, borderRadius: 10, borderColor: "white", padding: 4, }} > <View style={{ width: 200, height: 40, backgroundColor: "green", borderRadius: 4, }} /> </View> </View>

[chiaramooney]

Will not be an added feature for RNW on Paper. Will flag issue to make sure this behavior is supported on Fabric.