Views with borderRadius apply transform to nested views twice

[rozele]

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Add the following example to RNTester's TransformExample:

  {
    title: 'Translate with corner radius',
    description: 'Translate with corner radius',
    render(): Node {
      return (
        <View style={styles.container}>
          <View
            style={{
              backgroundColor: 'blue',
              borderRadius: 4,
              width: 100,
              height: 100,
              alignItems: 'center',
              justifyContent: 'center',
              transform: [{translateX: 50}],
            }}>
            <View
              style={{
                backgroundColor: 'cyan',
                width: 50,
                height: 50,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text style={{color: 'white'}}>X</Text>
            </View>
          </View>
        </View>
      );
    },
  },

Expected Results

I expect the transform behavior to match what occurs when I do not set the borderRadius, which does not apply the transform to children twice.

Snack, code example, screenshot, or link to a repository:

See example code above, which can be easily injected into any playground app or RNTester.

Here is what a transform with child views looks like without a borderRadius:

Here is what the transform looks like when a borderRadius is applied to the same view that also has a transform:

Another interesting issue, possibly unrelated, is that setting borderRadius seems to also implement overflow: hidden behavior. I suspect the borderRadius implementation just creates a custom clipping geometry.

Please note, this applies to any type of transform, so if I set scaleX to 2, I expect the outer and inner views to maintain the same width ratio, however the inner view doubles the scale and ends up matching the width of the outer view:

[rozele]

A reasonably simple work around is to just ensure that you don't apply the borderRadius and transform props on the same view, e.g.:

  {
    title: 'Translate with corner radius',
    description: 'Translate with corner radius',
    render(): Node {
      return (
        <View style={styles.container}>
          <View style={{transform: [{translateX: 50}]}}>
            <View
              style={{
                backgroundColor: 'blue',
                borderRadius: 4,
                width: 100,
                height: 100,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <View
                style={{
                  backgroundColor: 'cyan',
                  width: 50,
                  height: 50,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text style={{color: 'white'}}>X</Text>
              </View>
            </View>
           </View>
        </View>
      );
    },
  },

[Aashu-Dubey]

I recently faced the same issue in rn-windows version 0.70.6, though in my case it was happening in both with or without borderRadius, for example this code sample

    <View
      style={{
        width: 140,
        height: 50,
        backgroundColor: 'red',
        transform: [{ translateX: 80 }],
      }}
    >
      <Text
        style={{
          color: 'white',
          fontSize: 16,
          fontWeight: 'bold',
          backgroundColor: 'blue',
        }}
      >
        react-native-windows
      </Text>
    </View>

will show like this

but the overflow issue does happen with me too.
this is how it look after applying borderRadius: 12 to above View container

but the workaround you mentioned does work

    <View style={{ transform: [{ translateX: 80 }] }}>
      <View
        style={{
          width: 140,
          height: 50,
          borderRadius: 12,
          backgroundColor: 'red',
        }}
      >
        <Text
          style={{
            color: 'white',
            fontSize: 16,
            fontWeight: 'bold',
            backgroundColor: 'blue',
          }}
        >
          react-native-windows
        </Text>
      </View>
    </View>

Here I also noticed that, in earlier case, View container didn't translateX completely based on applied value 80, as you can see with the difference in left spacing for both examples (red background).

this is a minimal example, the real implementation where I faced this issue is this one, and to workaround this I had to apply reverse transform to nested views (Icon, Text) here.